[JS]画像ホバーで、さまざまな要素を配置した半透明のパネルをアニメーションで表示するスクリプト -HCaptions

Post on:2013年3月11日

画像をホバーすると、スライドやフェードのアニメーションで表示する半透明のパネルを実装するjQueryのプラグインを紹介します。

パネルは実装もカスタマイズも簡単です。

デモのキャプチャ

HCaptions -GitHub

HCaptionsの準備

まずは、スクリプトを使う準備から。

Step 1: 外部ファイル

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

<script src="js/jquery.js"></script>
<script src="js/jquery.hcaptions.js"></script>

Step 2: スクリプトの準備

キャプションを表示に付与するclassを定義します。

$(window).load(function(){
  $('.hcaption').hcaptions();
});

Step 3: HTML

HTMLは画像とキャプションの2つを配置し、画像を囲むa要素に「hcaption」を与えます。
キャプション部分はdiv要素なので、さまざまな要素が自由に配置できます。

<a href="#" data-target="#myToggle" class="hcaption"><img src="http://placehold.it/470x300/f1f1f1/aaa&text=Example" /></a>
<div id="myToggle" class="hide">
  <h5>Example Image</h5>
  <p>
    Content..
  </p>
</div>

HCaptionsのデモと実装

デモページからキャプションを表示するデモとその実装を見てみましょう。

デモのキャプチャ

デモページ

デモでは、キャプションを表示する際のさまざまなエフェクトが用意されています。

各エフェクトは、HTML5のデータ属性 or スクリプトで設定できます。
ここではHTML5のデータ属性の記述を紹介します。

デモのキャプチャ

上からスライド

<a href="#myToggle" class="hcaption" cap-effect="slide" cap-direction="top">
  <img src="http://placehold.it/470x300/f1f1f1/aaa&text=Example" />
</a>

エフェクトは「cap-effect」、方向は「cap-direction」に記述します。

デモのキャプチャ

下からスライド

<a href="#myToggle" class="hcaption" cap-effect="slide" cap-direction="bottom">
  <img src="http://placehold.it/470x300/f1f1f1/aaa&text=Example" />
</a>
デモのキャプチャ

フェード

<a href="#myToggle" class="hcaption" cap-effect="fade">
  <img src="http://placehold.it/470x300/f1f1f1/aaa&text=Example" />
</a>

エフェクトはスライドでけでなく、フェード表示もできます。

デモのキャプチャ

右からスライド

<a href="#myToggle" class="hcaption" cap-effect="slide" cap-direction="left">
  <img src="http://placehold.it/470x300/f1f1f1/aaa&text=Example" />
</a>

天地のスライドだけでなく、左右のスライドも。

デモのキャプチャ

スライドのスピードを変更

<a href="#myToggle" class="hcaption" cap-effect="slide" cap-speed="1000">
  <img src="http://placehold.it/470x300/f1f1f1/aaa&text=Example" />
</a>

スピードもデータ属性で設定できます。

HCaptionsの設定

アニメーションのエフェクト・方向・スピードだけでなく、キャプションのデザインも簡単に変更できます。

data_selector
キャプションコンテンツのセレクタ
default: .cap-overlay
width
オーバーレイの幅
default: 画像を同じフル
height
オーバーレイの高さ
default: 画像を同じフル
overlay_x
オーバーレイの水平ポジション
default: center
overlay_y
オーバーレイの垂直ポジション
default: center
overlay_bg
オーバーレイの背景
default: 継承
overlay_opacity
オーバーレイの不透明度
default: 1
effect
アニメーションのエフェクト
default: slide
speed
アニメーションのスピード
default: 400
direction
方向
default: top
zindex
オーバーレイのz-index
default: 2
onshow
キャプションを表示した時のコールバック関数
onhide
キャプションを隠した時のコールバック関数

sponsors

top of page

©2024 coliss