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

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

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

サイトのキャプチャ

SlipHover
SlipHover -GitHub

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

top of page

©2017 coliss