【js】Raindrops.jsを使って雨が落ちる水面を表現する

webサイトのコンセプトで時間により背景を変えたいなんて事もあるかもしれません。
今回はCSSアニメーションを使って時間が経つと色が変わる背景を作ってみたいと思います。

雨が落ちる水面を表現する動画

「Raindrops.js」を使うと、雨が落ちて水面が跳ねる様な動きを表現する事ができます。

必要な素材

必要なのは「Raindrops.js」と「jQuery」と「jQuery UI」です。
コーディングする前に準備しましょう。

Raindrops.jsのダウンロード

公式サイトからコードをダウンロードします。

https://daniellaharel.com/raindrops/

ページの「DOWNLOAD Get it now on Github」をクリック。

「Raindrops.js」をダウンロードします。
右上の「Code」→「Download ZIP」でも落とせます。

「jQuery」と「jQuery UI」はCDNを利用

以下のjQueryのサイトでCDNを利用します。

https://code.jquery.com/

HTMLコードの紹介

表示箇所

表示箇所はこの1行だけでOKです。

jsの読み込み、設定箇所

「Raindrops.js」を使うには、「jquery」と「jquery ui」の両方が必要になります。
読み込み記述は上記の順番で設置してください。

CSSコードの紹介

このCSSは無くても表示はしますが、動画の様にブラウザ下に設置したかったので高さを100vhに設定しました。

Raindrops.jsのオプション紹介

Raindrops.jsではスピードや跳ね方を変更したりとオプションで変更する事ができます。

color

色を変更する事ができます。

waveLength

波の長さを調整できます。
数値が大きい程、波の長さが短くなります。

frequency

雨が落ちる頻度を調整できます。
数を大きく設定すると土砂降りになります。

waveHeight

雨が落ちた時の波の高さを調整します。
数が大きいほど波が高くなります。

density

波の波紋の広がりを調整します。
数値が大きいほど波紋が短くなります。
densityは0.1~の設定。

rippleSpeed

波の波紋のスピードを設定します。
数値が大きいほど、ゴムをビーンと伸ばしたように跳ねます。
rippleSpeedは0.1~の設定。

canvasWidth

波全体(canvas)の横幅を変更できます。
最初は親の要素に対して100%になっています。

canvasHeight

波全体(canvas)の高さを変更できます。
最初は親の要素に対して50%になっています。

rightPadding

アニメーションの左右の余白を指定します。

複数オプションを設定する時

複数オプションを設置する場合は、「,」で区切るのを忘れずに!

まとめ

使う場所は限られるかもしれませんが、青なら雨、白なら牛乳など、コンセプトによっては必須な見せ方ができるjsだと思います。