[JS]フラットなデザインで映える！美しく広がる波紋のエフェクトを簡単に実装できるスクリプト -jQuery.twinkle
Post on:2014年8月28日
sponsors
Googleが提唱する新しいUX「Material Design」で採用されている美しく広がる波紋のエフェクトを簡単に実装できるjQueryのプラグインを紹介します。
波紋にはさまざまなバリエーションがあり、どれも美しいエフェクトです。
jQuery.twinkleのデモ
デモをいくつかGIFアニメーションにしてみました。
デモ：drop (Canvas)
水滴が落ちて波紋のように広がるようなエフェクト。
デモ：pulse (Canvas)
パルス、脈動のようにドクンドクン動きます。
デモ：drops (CSS3)
アニメーションはCanvasとCSS3が用意されています。
最初のdrop (Canvas)は円が一重でしたが、こちらは複数の波紋のエフェクト。
エフェクトは他にも用意されています。上記ページでも楽しめますが、ダウンロードファイルのデモで一覧できます。
ダウンロードファイルに含まれているデモ
jQuery.twinkleの使い方
Step 1: 外部ファイル
当スクリプトとjquery.jsを外部ファイルとして記述します。
<body> ... <script src="jquery-1.10.2.min.js"></script> <script src="../jquery.twinkle-0.7.1.js"></script> </body>
Step 2: HTML
アニメーションを適用する要素にclassやidを加えます。
<div id="twinkle1">click !</div>
Step 3: JavaScript
jQueryのセレクタで要素を指定し、スクリプトを実行します。
$(selector).twinkle();
アニメーションやエフェクトはオプションで設定します。
var options = {
"effect": "drop",
"effectOptions": {
"color": "rgba(0,0,255,0.5)",
"radius": 100
}
};
$(selector).twinkle(options);
エフェクトの種類、カラー、大きさ、タイミング、回数などを設定できます。
sponsors
