【jQuery】水のような動き、Raindrops.js

今回は雨つぶが水面に落ちたようなエフェクトを表現できる「Raindrops.js」の使い方を

サンプル付きで紹介します。

サンプル

See the Pen qBrGLme by yukiwebcreate (@Yukiwebcreate) on CodePen.

必要なもの

• jQuery
• jQury UI
• Raindrops.js

jQueryだけでは動作しないので、必ずjQuery UIを読み込みましょう。

ふたつともCDNでの読み込みが可能ですので、公式からCDNを読み込んでください。

↓jQuery

https://code.jquery.com/

↓jQuery UI

https://code.jquery.com/ui/

また当然ですがRaindrops.js本体も必要です。

こちらはCDNがないのでコードをGithubよりダウンロードしましょう。

https://daniellaharel.com/raindrops/

jQueryのコード

最後に今回実装しているjQueryのコードが下記です。

$(function(){
            let $ame = $('.box');
            $ame.raindrops({
                color:'rgba(255,255,255,0.9)',
                waveHeight: 100,
                canvasHeight:100,
                rippleSpeed: 0.01,
                rippleSpeed: 0.1, 
                density: 0.04
            });
        });

まとめ

他にもいくつか利用できるオプションがあり、

もっと自在にカスタマイズは可能なのでぜひ試してみてください。