[JS]普通のとはちょっと違う、オーバーレイのスライド方法が面白いホバーエフェクト

画像を配置したパネルをホバーすると、各アイテムをまたいでオーバーレイのパネルがスライドするエフェクトを紹介します。

Direction-Aware Hover Effect with CSS3 and jQuery

[ad#ad-2]

• デモ
• 実装

デモ

デモページ

デモでは3種類のホバーエフェクトが楽しめます。

[ad#ad-2]

デモ：Default

デフォルトのデモで、オーバーレイのパネルがマウスに追従して四方向からスライドします。

デモ：Delay

タイミングを少し遅らせたデモです。

デモ：Inverse

反対の面からスライドするデモです。

実装

HTML

各パネルは画像のimg要素とオーバーレイのdiv要素が一組になっており、リスト要素で実装します。

<ul id="da-thumbs" class="da-thumbs">
    <li>
        <a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
            <img src="images/7.jpg" />
            <div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
        </a>
    </li>
    <li>
        <!-- ... -->
    </li>
    <!-- ... -->
</ul>

CSS

まずは、各パネルの外観のスタイルです。各アイテムは「float:left;」で配置し、オーバーレイを「position: absolute;」にするので、画像とアイテムは「position: relative;」にします。

.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で加えるアニメーション用のclassを定義します。

.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;
}
/* Initial state classes: */
.da-slideFromTop {
    left: 0px;
    top: -100%;
}
.da-slideFromBottom {
    left: 0px;
    top: 100%;
}
.da-slideFromLeft {
    top: 0px;
    left: -100%;
}
.da-slideFromRight {
    top: 0px;
    left: 100%;
}
/* Final state classes: */
.da-slideTop {
    top: 0px;
}
.da-slideLeft {
    left: 0px;
}

JavaScript

スクリプトではマウスの侵入する場所によって、オーバーレイの正確なポジションを設定します。

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