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

Post on:2014年11月12日

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

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

デモのアニメーション

Purplecoat.js
Purplecoat.js -GitHub

Purplecoat.jsのデモ

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

デモのアニメーション

Shiori

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

デモのアニメーション

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

Purplecoat.jsの使い方

Step 1: 外部ファイル

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

<body>
  ...
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="purplecoat-min.js"></script>
</body>

Step 2: HTML

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

<img data-purplecoat="foo"
     data-purplecoat-label="Hello!" ...>

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

トリガーを設定します。

<button data-purplecoat-toggle="foo" ...>
  ...
</button>

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

カスタマイズ

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

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

<button data-purplecoat-toggle="odd" ...>...</button>
<button data-purplecoat-toggle="even" ...>...</button>

<img data-purplecoat="odd"
     data-purplecoat-label="1 is odd" ...>
<img data-purplecoat="even"
     data-purplecoat-label="2 is even" ...>
<img data-purplecoat="odd"
     data-purplecoat-label="3 is odd" ...>

カラーの設定。

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

<img data-purplecoat="bluecoat"
     data-purplecoat-label="Hello!" ...>

sponsors

top of page

©2024 coliss