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. Line Maker

    JavaScript

    アニメーションするラインを実装できる「Line Maker」

    Line Makerは、いろんなアニメーションをするラインを実装するこ…

  2. simple-calendar

    JavaScript

    イベント設定もできるシンプルなカレンダー実装「simple-calendar」

    simple-calendarは、イベント設定も可能なシンプルなカレン…

  3. vallenato.js

    JavaScript

    シンプルで実装も簡単なjQueryアコーディオン「vallenato.js」

    vallenato.jsは、シンプルで簡単に実装することができるjQu…

  4. Bar Indicator

    JavaScript

    数値をインジケーターで見やすく表示できる「Bar Indicator」

    Bar Indicatorは数値をインジケーターで表示させることができ…

  5. no-image
  6. CSS3 Menu Slider

コメント

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

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

最近の記事

  1. 蒼龍唐玉堂 特製牛バラ担々麺
  2. サーモンアボカドサラダラップとドリップ
  3. 猿田彦フレンチ
  4. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  5. ビジネスホテル

アーカイブ

PAGE TOP