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. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  2. JavaScript

    jQueryの基本的なセレクターを適当に試してみる

    自分の勉強用としてちょっと適当に試してみました。jQueryの基本のセ…

  3. stickUp
  4. no-image

    JavaScript

    いろんなズーム機能を実装できるjQueryプラグイン「xZoom」

    xZoomはいろんなズーム機能を実装することができるカスタマイズ性に優…

  5. gliojs

    JavaScript

    viewportから離れた時にイベントをトリガーしてくれる「gliojs」

    gliojsは、ページを閲覧している時にマウスがviewport(表示…

  6. jQuery_Overlay_Menu

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP