• 2175
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

Сегодня реализуем эффект при наведении на картинку, при котором, накладываемый слой, перемещается от одной картинки к другой в направлении, которое определяется движением курсора мыши.
1.Скачиваем архив,распаковываем и заливаем в папку с шаблоном.
2.Будем использовать неупорядоченный список,вставляем туда где у нас будет галерея:

Код:
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="#">
<img src="images/1.jpg" />
<div><span>Описание для картинки 1</span></div>
</a>
</li>
<li>
<!-- ... -->
</li>
<!-- ... -->
</ul>
3.Добавляем стили списка ,они будут иметь float:left и position:relative (так как overlay слой будет иметь абсолютное позиционирование):
Код:
.da-thumbs li {
float: left;
margin: 5px;
background: #fff;
padding: 8px;
position: relative;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
display: block;
position: relative;
}
.da-thumbs li a {
overflow: hidden;
}
.da-thumbs li a div {
position: absolute;
background: rgba(75,75,75,0.7);
width: 100%;
height: 100%;
}
4.Сам скрипт "ядро" нашего плагина подключаем в head:
Код:
this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {

var $el = $( this ),
$hoverElem = $el.find( 'div' ),
direction = self._getDir( $el, { x : event.pageX, y : event.pageY } ),
styleCSS = self._getStyle( direction );

if( event.type === 'mouseenter' ) {

$hoverElem.hide().css( styleCSS.from );
clearTimeout( self.tmhover );

self.tmhover = setTimeout( function() {

$hoverElem.show( 0, function() {

var $el = $( this );
if( self.support ) {
$el.css( 'transition', self.transitionProp );
}
self._applyAnimation( $el, styleCSS.to, self.options.speed );

} );


}, self.options.hoverDelay );

}
else {

if( self.support ) {
$hoverElem.css( 'transition', self.transitionProp );
}
clearTimeout( self.tmhover );
self._applyAnimation( $hoverElem, styleCSS.from, self.options.speed );

}

} );
Легко настроить для плагина.Смотрим демо,пишем комменты.

Можешь почитать и вот эту статейку "Интересная анимация в поле input"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

----