Эффект при наведении-следующий по направлению курсора


Эффект при наведении-следующий по направлению курсора

Реализуем на CSS3 и jQuery эффект при наведении на картинку, при котором, накладываемый слой, перемещается от одной картинки к,обслуживание 1с, другой в направлении, которое определяется движением курсора мыши.

HTML

Для картинок-миниатюр и накладываемого слоя с описанием, будем использовать неупорядоченный список:

 

CSS

Элементы списка будут иметь float:left и position:relative (так как overlay слой будет иметь абсолютное позиционирование):

 

javascript

Вот «сердце» нашего небольшого плагина:

Мы будем отслеживать положение мыши и соответсвенно определять направление накладываемого слоя и применять соответствующий эффект transition для slide in, когда курсор покидает область картинки, в том же направлении осуществляется эффект slide out для накладываемого слоя.
Мы в основном привязываем события «mouseenter» и «mouseleave» к элементам списка и с функцией_getDir получаем направление движения «В» или «ИЗ» (представьте себе, что «область обнаружения» для каждого направления — это прямоугольник разделенный диагоналями на 4 части)

 

Источник урока: pcvector.net

Previous Selectric - пользовательский select
Next Плагин Jrating

Suggested Posts

7 простых способов создать шум вокруг Вашего сайта

Всплывающая подпись к картинке при наведении с помощью CSS3

Как ускорить загрузку веб-страниц

Эффект при наведении на заголовок

WordPress: закрываем сайт на техническое обслуживание

Карта сайта для WordPress без плагинов — советы, правила, инструкция