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


ЭФФЕКТ НАВЕДЕНИЯ

Реализуем на CSS3 и jQuery ЭФФЕКТ НАВЕДЕНИЯ на картинку, при котором, накладываемый слой, перемещается от одной картинки к, другой в направлении, которое определяется движением курсора мыши.

1. Selectric — пользовательский select
2. Стилизация выпадающего списка для сайта
3. Вертикальное многоуровневое меню для сайта

HTML

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

<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>

CSS

Элементы списка будут иметь 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%;
}

javascript

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

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 );

    }

} );

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

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

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

Suggested Posts

Атрибуты товара на странице категории Opencart

Simple Account Page Простой личный кабинет 2.x 1.1

Красочное анимированное меню навигации на CSS3

Сервисы и плагины: кросспостинг из WordPress

Инструкция как стать программистом с нуля

OpenCart 2.2 — пять свежих адаптивных шаблонов от pavothemes