[JS]コンテンツの区切り線を水面に見立てて、ぽちゃんたぷんっと波立たせる癒やし系スクリプト -Raindrops.js
Post on:2015年7月13日
sponsors
コンテンツの区切りなどの線を水面に見立てて、滴を落としたように波立たせる素敵なアニメーションを簡単に実装できるスクリプトを紹介します。
↓区切り線がぽちゃんたぷんっと波立ちます。
Raindrop.js
Raindrops.js -GitHub
Raindrops.jsのデモ
水面の設定はいろいろでき、水面の高さや色、滴の数や間隔や勢いなどを調整できます。
静かな水面や激しい嵐も再現できます。
スクリプトのページでもコンテンツごとの区切りに使用されています。
ヘッダやフッタあたりに少し適用するのはいい感じですね。
Raindrops.jsの使い方
Step 1: 外部ファイル
当スクリプトとjquery.jsを外部ファイルとして記述します。
<body> ... コンテンツ ... <script src="js/jquery-1.9.1.min.js"></script> <script src="js/raindrops.js"></script> </body>
Step 2: HTML
水面のアニメーションを適用する要素を用意します。
<div id="example1"></div>
Step 3: JavaScript
適用する要素を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});
sponsors
