[JS]非常に簡単な実装で、ページ上のさまざまな要素にオーバーレイを表示できるスクリプト -Purplecoat.js

Post on:2014年11月12日

sponsorsr

画像にオーバーレイでテキストを表示したり、ボタンやテキストなどさまざまな要素にオーバーレイをアニメーションで表示できるjQueryのプラグインを紹介します。

使い方も非常に簡単で、スクリプトを一行も記述しないで利用できます。

Purplecoat.jsのデモ

作者様のサイトでは、Purplecoat.jsのエフェクトを体験できます。
右のサイドバーのちょい下にあるボタンがトリガーです。

上記のように複数の要素に同時に表示させたり、奇数番目や偶数番目、カラーを変更して表示させることもできます。

デモページ：カスタマイズ

当スクリプトとjquery.jsを外部ファイルとして記述します。

[html]

...

[/html]

オーバーレイを表示したいエレメントにdata属性を与えます。

[html]

[/html]

「data-purplecoat」の「foo」はトリガーに使用します。
「data-purplecoat-label」は表示するテキスト。

トリガーを設定します。

[html]

[/html]

「data-purplecoat-toggle」に設定した「foo」を記述します。

一つのトリガーで複数を表示したり、オーバーレイのカラーを設定できます。

複数をコントロールする記述。

[html]

[/html]

カラーの設定。

[html]

[/html]