[JS]フラットなデザインで映える!美しく広がる波紋のエフェクトを簡単に実装できるスクリプト -jQuery.twinkle

Googleが提唱する新しいUX「Material Design」で採用されている美しく広がる波紋のエフェクトを簡単に実装できるjQueryのプラグインを紹介します。

波紋にはさまざまなバリエーションがあり、どれも美しいエフェクトです。

デモのアニメーション

jQuery.twinkle

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

top of page

©2018 coliss