JavaScript

クリックで画像や要素にオーバーレイを表示させるjQueryプラグイン「Purplecoat.js」

Purplecoat.jsはクリックすると画像や好きな要素にオーバーレイを表示させることができるjQueryプラグインです。さりげないフェードのアニメーションで表示されるオーバーレイにはテキストを挿入することもできます。

[ads_center]

Purplecoat.jsの使い方

Purplecoat.jsのデモや詳細は以下からどうぞ。

Purplecoat.js

Purplecoat.js

使い方は、まずjQuery本体とプラグインファイルを読み込みます。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="purplecoat-min.js"></script>

オーバレイを表示させたい要素を以下のように記述。data-purplecoat-labelに表示させたいテキストを入れておきます。

<img data-purplecoat="sample"
     data-purplecoat-label="sample text">

あとはボタンを記述するだけです。

<button data-purplecoat-toggle="sample"
        data-purplecoat-color="rgba(63, 159, 252, 0.8)">click</button>

シンプルな使い方で、あっという間にお洒落なオーバレイを表示させる機能を実装することができます。手軽にテキスト付きのオーバレイを表示させたい時に活用してみてはいかがでしょうか?

Quote Tweet選択したテキストをツイートできるWordPressプラグイン「Quote Tweet」前のページ

フォームにバリデーションを実装できるjQueryプラグイン「Guardian」次のページGuardian

関連記事

  1. jQuery Quick Modal
  2. no-image

    JavaScript

    ミニマリスティックでフレキシブルなjQueryスライダー「Bore Bones Slider」

    Bore Bones Sliderはミニマリスティックでフレキシブルな…

  3. JavaScript

    シンプルでカスタマイズも簡単にできるjQueryプラグイン「Twitter Follow Box W…

    とてもシンプルでカスタマイズもしやすいjQueryプラグイン「Twit…

  4. P-Loading

    JavaScript

    パワフルなローディングマスクを実装できるjQueryプラグイン「P-Loading」

    P-Loadingは、パワフルなローディングマスクを手軽に実装すること…

  5. Segment

    JavaScript

    SVG pathをアニメーションさせる軽量のスクリプト「Segment」

    SegmentはSVG pathをアニメーションさせる軽量のスクリプト…

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP