Raindrops.jsがおもしろい！！ : Web制作の実験場・ショーケース

コンテンツの区切り線を水面に見立てて、波を描画してくれるJS「Raindrops.js」が面白いので、
本サイトフッターやイントロに使用しました。
極めて使えるシーンは限定的かもしれませんが、動きが気持ち悪いほどスムーズです。

では、以下実装の手順です。

まずは配布サイトより、プラグインのファイル「raindrops.js」を入手してきましょう。
「Raindrops.js」：http://daniellaharel.com/raindrops/

「Raindrops.js」はjQueryプラグインなので単体では動きません。
「jquery.js」の他に別途「jquery.ui.js」も必要です。
以下のURLよりダウンロードしてください。

「jQuery」：http://jquery.com
「jQuery UI」：http//jqueryui.com

HTMLコーディング

例は、ID「hoge」の中に「Raindrops.js」で波を描画します。

<!--必要なjsファイルの読み込み-->
<script src="jquery.js"></script>
<script src="jquery.ui.js"></script>
<script src="raindrops.js"></script>
<!--Raindrops.jsの設定-->
<script>
$(function(){
$('#hoge').raindrops({
        waveLength: 100,    // 波の起点とその波及先になる要素の数を指定できます。デフォルトは340。
        canvasWidth:0,     // canvasの横幅の指定になります。rightPaddingとの合計がcanvasの全幅になります。デフォルトは100%です。
        canvasHeight: 40,    // canvasの高さです。デフォルトは50%
        color: '#00B3EA',   // canvasの水面下のカラーを指定できます。デフォルトは#00aeef
        frequency: 5,       // 波紋の発生頻度を設定できます。デフォルトは3です。
        waveHeight: 75 ,   // 波の高さを指定できます。デフォルトは100
        density: 0.001,      // 波の密度を指定できます。波紋の影響度合いのような感じです。デフォルトは0,02
        rippleSpeed:  0.01,  // 波紋の速度を指定できます。デフォルトは0.1
        rightPadding: 20,    // 右のパディングを設定できます。
        position:'absolute', //ポジションの設定ができます。
        positionBottom:0, // CSSのbottomの設定ができます。
        positionLeft:0 // CSSのLeftの設定ができます。	
});
});
</script>

<div id="hoge">
</div>

$(function(){

$('#hoge').raindrops({

waveLength: 100, // 波の起点とその波及先になる要素の数を指定できます。デフォルトは340。

canvasWidth:0, // canvasの横幅の指定になります。rightPaddingとの合計がcanvasの全幅になります。デフォルトは100%です。

canvasHeight: 40, // canvasの高さです。デフォルトは50%

color: '#00B3EA', // canvasの水面下のカラーを指定できます。デフォルトは#00aeef

frequency: 5, // 波紋の発生頻度を設定できます。デフォルトは3です。

waveHeight: 75 , // 波の高さを指定できます。デフォルトは100

density: 0.001, // 波の密度を指定できます。波紋の影響度合いのような感じです。デフォルトは0,02

rippleSpeed: 0.01, // 波紋の速度を指定できます。デフォルトは0.1

rightPadding: 20, // 右のパディングを設定できます。

position:'absolute', //ポジションの設定ができます。

positionBottom:0, // CSSのbottomの設定ができます。

positionLeft:0 // CSSのLeftの設定ができます。

});

</script>

</div>

波の高さを高くすると、波ではなくスライムの様な動きになり、
波の密度を低くするとゆったりした波になります。

Blog