水面のようなアニメーションを実装できるjQueryプラグイン「Raindrops.js」!

2015/07/29

こんにちは。
今回は水面のようなアニメーションを実装できるjQueryプラグイン「Raindrops.js」!です。

水面のようなアニメーションを実装できる面白そうなjQueryプラグインを見つけたので紹介します。

水面のようなアニメーションを実装できるjQueryプラグイン「Raindrops.js」!

Raindrops.js

raindrops-js

 

jQueryプラグイン「Raindrops.js」をダウンロードしてみよう!

上記の「DOWNLOAD」のボタンをクリックし、「Github」をクリックします。
「Github」の右下の「Download ZIP」のボタンをクリックしてダウンロードします。

 

jQueryプラグイン「Raindrops.js」を設置してみよう!

html部分を記述します。

 

jQuery本体とraindrops.jsを/bodyの手前に読み込みます。

 

その下に下記のスクリプトを記述します。
これがデフォルトの状態になります。

 

色と高さを指定したい場合は下記のように記述します。

 

その他のオプションはサイトの「Documentation」にありますので、確認してみるといいと思います。

Documentation

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

いかがでしたか。面白い動きなのでどこかで使いたいですね。
以上で水面のようなアニメーションを実装できるjQueryプラグイン「Raindrops.js」!でした。

Related Post

topへ戻る