水面のようなアニメーションを実装できる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」!でした。

Amazonで欲しい商品を安く手に入れる方法!

Amazonでお得に買い物をしたいならAmazonギフト券の現金チャージするのがおすすめです。
現金チャージする度に最大2.5%分のポイントが貯まります。

現在キャンペーン中なので、初めて5,000円以上の現金チャージする場合は1,000円分のポイントがもらえます。
いつキャンペーンが終了するか分からないので、Amazonをよく利用される方はいますぐにやっておきたいですね。

この記事を読んだ人はこんな記事も読んでいますよ