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>

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

関連記事

  1. no-image

    JavaScript

    スクロール時に要素を固定できるjQueryプラグイン「ScrollFix」

    ScrollFixはスクロール時に特定の要素を固定して表示できるjQu…

  2. quick-select

    JavaScript

    素早く簡単に選択できるセレクトボックス「quick-select」

    quick-selectは素早く簡単に選択可能なセレクトボックスを実装…

  3. Vide

    JavaScript

    背景にvideoを表示できるjQueryプラグイン「Vide」

    VideというjQueryプラグインを使えば、Webサイトの背景にvi…

  4. Letter Effects and Interaction Ideas
  5. Tag-it

    JavaScript

    サジェスト機能を搭載したタグ編集ウィジェット「Tag-it」

    Tag-itはサジェスト機能を搭載したjQuery UIプラグインによ…

  6. jQuery Lighter

    JavaScript

    優雅なフェードで拡大縮小されるLightbox系ギャラリー・jQuery Lighter

    jQuery Lighterは美しいフェードで画像を拡大縮小させること…

最近の記事

  1. 梅しば
  2. BM-IBCDH13RD
  3. 雪
  4. ホットのドリップ
  5. めんたいこ&チーズ味 海老せんべい

アーカイブ

PAGE TOP