今回はちょっと珍しいエフェクトを実現するjQueryプラグインを紹介します。
しずくが落ちてきた水面をcanvasで再現していて、あまりWebでは見かけない有機的な動きを実装することができます。
用意するもの
GitHubからプラグイン一式をダウンロードしましょう。
その中から最低限必要なものは以下の通りです。こちらのプラグインはjqueryとjQueryUIを読み込む必要があります。それぞれ最新をダウンロードしておきましょう。
<script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery-ui.js" type="text/javascript"></script> <script src="js/raindrops.js" type="text/javascript"></script>
基本的な使い方
特別なマークアップは必要ありませんが、まずプラグインがcanvasを入れ込む要素をhtmlに記述しましょう。
指定したdivの中にcanvasが生成されます。
<div id="drops01"></div>
それと、入れ込む要素の幅と高さをcssで指定しておく必要があります。
#drops01{
width: 100%;
height: 300px;
}
ここまで準備ができれば、あとはjsの設定です。
全てデフォルトでプラグインを使う場合は下記の一行だけです。
$(function(){
//先ほど用意した要素のidを指定
$('#drops01').raindrops();
});
用意されたオプションでカスタマイズする場合には下記のような書き方になります。
$('#drops02').raindrops({
color:'#aaefff', //水面の色を決めています。
waveHeight:100, //並みの高さを指定する部分。
rippleSpeed: 0.01, //アニメーション自体のスピードを設定する部分
frequency: 1 //水滴がおちる頻度。数値が高いほど頻繁に。
});
より詳しいオプションについては公式サイトをご覧ください。そんなに難しいオプションはありません。
今後こういった一部の演出のためにcanvasが使われるようなことが増えていきそうですねー。
その場合、ぴったりくるプラグインを探すのは結構無謀な気がするので自身で書けるよう勉強しとかなきゃなと思います。
