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モーダルウィンドウ「umodal」

    umodalはスッキリしたシンプルで美しいモーダルウィンドウを実装でき…

  2. no-image
  3. NO IMAGE
  4. Timeliny

    JavaScript

    レスポンシブ対応の年ベースによるjQueryタイムライン「Timeliny」

    Timelinyはレスポンシブに対応した年ベースによるタイムラインを実…

  5. TwentyTwenty

    JavaScript

    2枚の画像を見比べれるjQueryプラグイン「TwentyTwenty」

    TwentyTwentyは2枚の画像を見比べれる便利なjQueryプラ…

  6. jCalculator

    JavaScript

    jQueryプラグインで電卓を実装できる「jCalculator」

    jCalculatorというjQueryプラグインを使えば入力フィール…

最近の記事

  1. ACC-TRBX
  2. ピスタチオ クリスマス ツリー フラペチーノ
  3. SF-G64T
  4. USB Type-C搭載ドッキングステーション

Facebookページ

PAGE TOP