[JS]画像のホバー時の方向によってオーバーレイをスライド表示するスクリプト -SlipHover

画像やパネルなどをホバーすると、テキストを配置したオーバーレイを2D/3Dのさまざまなアニメーションで表示するjQueryのプラグインを紹介します。

スライドの方向は、ホバーの方向によって変わります。右からホバーしたら、右からスライドとか、逆もできます。

SlipHover
SlipHover -GitHub

• SlipHoverのデモ
• SlipHoverの使い方

SlipHoverのデモ

デモはChrome, Safari, Firefoxなどのモダンブラウザ、IEは9+でご覧ください。

デモ

SlipHoverは、ホバーの方向に応じて、オーバーレイがスライドする方向が変わります。
画像が並んでいると、繋がってスライドする感じです。

オーバーレイは跨ぐ感じに

スクリプトはオプションも豊富で、さまざまな動きが楽しめます。

デモページ: height
オーバーレイの高さを変更。

デモページ: flip
オーバーレイを3Dに。

デモページ: reverse
リバースではホバーと反対の方向からスライドするので、シャッターが閉じる感じになります。

デモページ: title
表示するテキストは、title, alt, HTML5のdata属性から取得できます。

デモページ: auto scroll
長いテキストを自動スクロールさせることもできます。

SlipHoverの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプトを外部ファイルとして記述します。

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.sliphover.min.js"></script>

Step 2: HTML

各画像はimg要素で配置しラッパーで内包し、表示するテキストをtitle内に記述します。

<div id="container">
  <img src="1.jpg" title="title1" />
  <img src="2.jpg" title="title2" />
  ...
</div>

Step 3: JavaScript

ラッパーをjQueryのセレクタで指定し、スクリプトを実行します。

<script type="text/javascript">
$(function(){
  $('#container').sliphover();
})
</script>

オプション

オプションでは、上記紹介したデモの他にもさまざまな設定が変更できます。

height (default: 100%)

オーバーレイの高さ

flip (default: false)

3Dのフリップの有無

target (default: img)

アニメーションを適用する要素

ttle (default: title)

オーバーレイに表示するテキスト、altやHTML5のdata属性も可

duration (defautl: fast)

アニメーションの持続時間、fast, slowの他にmsでも可

fontColor (default: #fff)

オーバーレイのテキストのカラー

backgroundColor (default: rgba(0,0,0,.5))

オーバーレイのカラー

reverse (default: false)

リバースの有無

autoScroll (default: true)

オートスクロールの有無

scrollSpeed (default: 40)

スクロールスピード

オプションを使用すると、下記のような記述になります。

$("#container").sliphover({
    option: value,
    option2: value2,
    ...
});