Хаки и Скрипты Next Generation CMS

CSS3 и jQuery эффект при наведении на картинку

irbees2008 irbees2008 Опубликовано - 18 - марта Изображения
3995 - 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 );

}

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

Можешь почитать и вот эту статейку "Анимация контента в табах на CSS3"

Опрос

Ваше мнение

Какие темы вам интереснее?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [7]
  • Гости: [7]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 33
  • Генерация страницы: 1.171сек
  • Потребление памяти: 5.162 Mb 
  •   Яндекс.Метрика