HCaptions

JavaScript

ホバー時に色々なエフェクトでキャプションをオーバーレイ表示できるjQueryプラグイン「HCaptions」

指定した要素をホバーすると色々なエフェクトでキャプションをオーバーレイ表示させることができるjQueryプラグイン「HCaptions」。フェードや上下左右からのスライドといったエフェクトがあります。応用次第でブログからWebサービスまで色々なところで活用できそうですね。

[ads_center]

使い方

使い方もとてもシンプルです。

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

マークアップは以下のような感じ。画像とホバー時のキャプションを記述していきます。

<a href="#" data-target="#myToggle" class="hcaption"><img src="画像パス"></a>
<div id="myToggle" class="hide">
    <h5>サンプルテキスト</h5>
    <p>サンプルテキスト...</p>
</div>

オプションではエフェクトやスピードを指定したりすることができます。以下は左からのスライドエフェクト。

$(selector).hcaptions({
    effect: "slide",
    direction: "left"
});

他にもたくさんのオプションがあるので詳しくは公式サイトで確認することができます。

お洒落なホバーエフェクトでキャプションを表示させたい時には覚えておきたいプラグインですね。

Amazon.co.jpのほしい物リストに追加Amazon以外のサイトからでもAmazonのほしい物リストに追加できるChrome拡張機能前のページ

ミラーレス一眼とかに最適なJOBYの超小型の三脚「ゴリラポッド マイクロ800」次のページ

関連記事

  1. Lettering.js

    JavaScript

    一文字ずつスタイルなどを調整できるようにしてくれる「Lettering.js」

    Lettering.jsは一文字ずつCSSなどでスタイルを調整できるよ…

  2. no-image

    JavaScript

    クッキーバナーを手軽に作れるjQueryプラグイン「Cookie Banner JS」

    Cookie Banner JSは、Webサイト上に表示させるクッキー…

  3. JavaScript

    フレキシブルなjQueryプラグインのアコーディオンパネル「Flexible Slide-to-to…

    いい感じのアコーディオンがあったので試してみたところ、とてもよさげだっ…

  4. no-image

    JavaScript

    ダイナミックな自動スライドショーを実装できる「CSS + jQuery Gallery」

    CSS + jQuery Galleryはダイナミックでかっこいい自動…

  5. JavaScript

    シンプル・軽量・簡単なLightBox系モーダルウィンドウのjQueryプラグイン「portBox」…

    portBoxというjQueryプラグインを使えばシンプルで軽量なLi…

  6. iconate.js

    JavaScript

    アイコンをオシャレにアニメーションしながらtransformさせる「iconate.js」

    iconate.jsはアイコンをアニメーションさせながら別のアイコンへ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP