
Красивый эффект, который построен на CSS3 и jQuery. Идея заключается в формировании покрывающего полупрозрачного слоя, который выдвигается поверх картинки со стороны перемещения курсора мыши. При дальнейшем движении курсора покрывающий слой сдвигается вслед за ним. Подобный эффект можно использовать для галерей и портфолио работ.
Установка.
Мы используем неупорядоченный список для построения структуры для демонстрации. В элементе списка размещаются миниатюра и покрывающий слой:
Код
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="http://ruseller.com/lessons.php?rub=37&id=1392" target="_blank">
<img src="images/1.jpg" />
<div><span>Единая страница для обработки ошибок</span></div>
</a>
</li>
<li>
<!-- ... -->
</li>
<!-- ... -->
</ul>
<li>
<a href="http://ruseller.com/lessons.php?rub=37&id=1392" target="_blank">
<img src="images/1.jpg" />
<div><span>Единая страница для обработки ошибок</span></div>
</a>
</li>
<li>
<!-- ... -->
</li>
<!-- ... -->
</ul>
Пункт списка будет смещаться влево и позиционируется относительно, потому что покрывающий позиционируется абсолютно:
Код
.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%;
}
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%;
}
Затем определяем некоторые классы, которые будут добавляться в коде JavaScript. Нам нужен класс анимации, несколько классов для начального позиционирования покрывающего слоя, и два класса для конечного положения. Несмотря на то, что все может быть выполнено в JavaScript, но лучше иметь отдельные стили, чтобы можно было легко настраивать внешний вид:
Код
.da-thumbs li a div.da-animate {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/* Классы начального полжения: */
.da-slideFromTop {
left: 0px;
top: -100%;
}
.da-slideFromBottom {
left: 0px;
top: 100%;
}
.da-slideFromLeft {
top: 0px;
left: -100%;
}
.da-slideFromRight {
top: 0px;
left: 100%;
}
/* Классы конечного положения: */
.da-slideTop {
top: 0px;
}
.da-slideLeft {
left: 0px;
}
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/* Классы начального полжения: */
.da-slideFromTop {
left: 0px;
top: -100%;
}
.da-slideFromBottom {
left: 0px;
top: 100%;
}
.da-slideFromLeft {
top: 0px;
left: -100%;
}
.da-slideFromRight {
top: 0px;
left: 100%;
}
/* Классы конечного положения: */
.da-slideTop {
top: 0px;
}
.da-slideLeft {
left: 0px;
}
Вот что будет происходить: в зависимости от места появления курсора мыши на миниатюре будет присоединяться соответствующий класс, который будет устанавливать правильное начальное положение покрывающего слоя. Затем применяется анимационный класс и затем мы добавляем класс конечного положения, так что покрывающий слой выскальзывает с нужной стороны. Когда курсор мыши покидает элемент, снова присоединяется соответствующий начальный класс и удаляетя класс конечного положения.
Вот так выглядит основная часть нашего маленького плагина:
Код
this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {
var $el = $(this),
evType = event.type,
$hoverElem = $el.find( 'div' ),
direction = _self._getDir( $el, { x : event.pageX, y : event.pageY } ),
hoverClasses= _self._getClasses( direction );
$hoverElem.removeClass();
if( evType === 'mouseenter' ) {
$hoverElem.hide().addClass( hoverClasses.from );
clearTimeout( _self.tmhover );
_self.tmhover = setTimeout( function() {
$hoverElem.show( 0, function() {
$(this).addClass( 'da-animate' ).addClass( hoverClasses.to );
} );
}, _self.options.hoverDelay );
}
else {
$hoverElem.addClass( 'da-animate' );
clearTimeout( _self.tmhover );
$hoverElem.addClass( hoverClasses.from );
}
} );
var $el = $(this),
evType = event.type,
$hoverElem = $el.find( 'div' ),
direction = _self._getDir( $el, { x : event.pageX, y : event.pageY } ),
hoverClasses= _self._getClasses( direction );
$hoverElem.removeClass();
if( evType === 'mouseenter' ) {
$hoverElem.hide().addClass( hoverClasses.from );
clearTimeout( _self.tmhover );
_self.tmhover = setTimeout( function() {
$hoverElem.show( 0, function() {
$(this).addClass( 'da-animate' ).addClass( hoverClasses.to );
} );
}, _self.options.hoverDelay );
}
else {
$hoverElem.addClass( 'da-animate' );
clearTimeout( _self.tmhover );
$hoverElem.addClass( hoverClasses.from );
}
} );
События ‘mouseenter’ и ‘mouseleave’ привязываются к пункту списка. С помощью функции _getDir определяем направление перемещения курсора мыши в область элемента (область виртуально делится на четыре треугольника для определения направления). Все классы изначально удаляются и в зависимости от входа или выхода курсора мыши в область устанавливаются либо все три класса,ибо только классы анимации и начального положения.
В демонстрации также представлены варианты с задержкой перемещения покрывающего слоя и с инверсией движения.
Просмотров: 3444
|
Категория: Скрипты / HTML | Добавил: NA
Другие новости |
Поделиться ссылкой
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.