[JS]コンテンツの区切り線を水面に見立てて、ぽちゃんたぷんっと波立たせる癒やし系スクリプト -Raindrops.js

Post on:2015年7月13日

Raindrops.jsのデモ

水面の設定はいろいろでき、水面の高さや色、滴の数や間隔や勢いなどを調整できます。
静かな水面や激しい嵐も再現できます。

スクリプトのページでもコンテンツごとの区切りに使用されています。

ヘッダやフッタあたりに少し適用するのはいい感じですね。

当スクリプトとjquery.jsを外部ファイルとして記述します。

<body>
  ...
  コンテンツ
  ...
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/raindrops.js"></script>
</body>

水面のアニメーションを適用する要素を用意します。

<div id="example1"></div>

適用する要素をjQueryのセレクタで指定し、スクリプトを実行します。

jQuery('#example1').raindrops();

デモにあるように、オプションで水面の位置やアニメーションをいろいろ設定できます。
位置とカラーを変更する時は、こんな感じに。

jQuery('#example2').raindrops(
{color:'#99d4a5',
canvasHeight:200});

アニメーションの設定は、こんな感じに。

jQuery('#example5').raindrops(
{color:'#f77b7b',
canvasHeight:150, 
waveLength: 100,
 rippleSpeed: 0.05, 
density: 0.04});