【jQuery】水面に滴る雨を再現した[Raindrops.js]でウェブページに癒しと冷涼感を。(1)TagsONZE株式会社オンズ企業サイトへMenu株式会社オンズ開発ブログ【jQuery】水面に滴る雨を再現した[Raindrops.js]でウェブページに癒しと冷涼感を。【jQuery】水面に滴る雨を再現した[Raindrops.js]でウェブページに癒しと冷涼感を。Google夏ですね!例年以上の猛暑が続いている今日この頃。皆様いかがお過ごしでしょうか。今日は、こんな暑い夏に相応しい「冷涼感」を演出してくれるjQueryプラグインを紹介します。[Raindrops.js]と名付けられたこのプラグインは、ボックス要素を水面に見立て、降り注ぐ雨の様子を演出します。実際に使ってみたサンプルをご覧ください。Raindrops.js]実装サンプル導入方法は比較的簡単です。[Raindrops.js]の使い方まずは配布サイトより、プラグインのファイル「raindrops.js」を入手してきましょう。[Raindrops.js]配布サイト:http://daniellaharel.com/raindrops/基本的なことですが[Raindrops.js]はjQueryプラグインなので単体では動きません。別途「jquery.js」と「jquery.ui.js」も必要なります。両ファイルは以下のURLよりダウンロードできます。UI]:http//jqueryui.com入手してきた計3つのファイルはHTMLの適当な箇所で読み込ませます。src="raindrops.js"></script>このとき、各ファイルを読み込む順番にも注意してください。「jquery」「jqueryui」「raindrops」の順で読み込ませます。続いて「水面」を表現するためのボックス要素を作ります。記述するだけでOKです。ボックスの背景やサイズなどはスタイルシート側で適当に調節してください。最後に、この要素に[Raindrops.js]を効かせるためのコードを記述すれば終了です。<script>$(function(){$('#sample').raindrops();});</script>具体的には上記のようなコードになりますね。[Raindrops.js]のオプション設定もちろん各種オプションを設定することも可能です。使用できるパラメーターは以下のとおり。colorwaveLengthfrequencywaveHeightdensityrippleSpeedcanvasWidthcanvasHeightrightPaddingpositionpositionBottompositionLeftオプションの指定は以下のように記述していきます。canvasHeight:100});});以上。ウェブページのワンポイントとして使えそうですね。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【jQuery】日付と時間を直感的に選択できる[DateTimePicker]が便利です。【jQuery】画像のリンク切れに備えるための簡単なjQueryコード。