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

プログラミング

こんにちはtakosanです。

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

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

サンプル

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

必要なもの

  • jQuery
  • jQury UI
  • Raindrops.js

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

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

↓jQuery

jQuery CDN

↓jQuery UI

jQuery UI – All Versions | jQuery CDN

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

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

Raindrops.js

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
            });
        });

まとめ

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

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

タイトルとURLをコピーしました