水面が波打っているようなアニメーションを実装できるjQueryプラグイン「Raindrops」

Raindropsは、横から見た水面が波打っているようなアニメーションを実装することができるjQueryプラグインです。

デモは以下ページにてご覧いただけます。

デモページを見る

Raindropsの使い方

ステップ1. Raindropsのダウンロードと設置

まずはGitHubからファイルをダウンロードします。raindrops.jsをサーバーに設置して、jQuery本体・jQuery UIと一緒に読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="raindrops.js"></script>

RaindropsはjQueryだけでなく、jQuery UIも必要です。

ステップ2. HTMLのマークアップ

HTMLは非常にシンプルです。以下のようにアニメーションを表示させたい箇所にIDを付与します。

<div id="raindrops"></div>

この部分にcanvasが描画され、水面が表示されます。

ステップ3. Raindropsの実行

最後にRaindropsを実行するスクリプトを記述します。記述する場所は、</body>の直前でOKです。

<script>
$(function(){
  $('#raindrops').raindrops({
    color:'#0080FF', //水の色
    waveLength:340, //波の長さ
    frequency:3, //波紋の発生頻度
    waveHeight:100, //波の高さ
    density:0.02, //波紋の量
    rippleSpeed:0.1, //波紋のスピード
    canvasWidth:1000, //canvasの横幅
    canvasHeight:120, //canvasの高さ
    rightPadding:20, //canvasの余白調整
    position:'absolute', //positionの値
    positionBottom:0, //positionのbottomの値
    positionLeft:0 //positionのleftの値
  });
});
</script>

「#raindrops」でHTMLで付与したIDを指定しましょう。オプションは不要なものは削除してください。

あとがき

とてもユニークなアニメーションを実装できますね。一風変わったアニメーションを実装したい時は、ぜひ導入をご検討ください。