Последние комментарии
- DxB-studio
Оставлен 01.01.2015
Стильное оповищение Войти или зарегестрироватся для ucoz - DxB-studio
Оставлен 29.11.2014
o2 Reborn Ultimat для uCoz (ЕСТЬ ДЕМО) - Qston.3dn.ru
Оставлен 04.09.2014
Аватары в личных сообщениях - Cat
Оставлен 13.07.2014
Сворачиваемый мини-чат для ucoz - Владимир
Оставлен 07.07.2013
Форма регистрации для uCoz - ugames7
Оставлен 21.04.2013
Оригинальный шаблон для uCoz
Красивый эффект, который построен на 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 определяем направление перемещения курсора мыши в область элемента (область виртуально делится на четыре треугольника для определения направления). Все классы изначально удаляются и в зависимости от входа или выхода курсора мыши в область устанавливаются либо все три класса,ибо только классы анимации и начального положения.
В демонстрации также представлены варианты с задержкой перемещения покрывающего слоя и с инверсией движения.
Посмотреть демо Эффектный вывод дополнительной информации в галерее изображений
Другие новости |
Поделиться ссылкой
|
|