晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

水滴や波紋を表現するJavaScriptスクリプトを試してみた。

暑い夏が続くので、涼しげな(?)水滴や波紋を表現するJavaScriptスクリプトを試してみた。

一つ目は、「rainyday.js」。

窓ガラスに雨の水滴が付いていくような効果を与える。以下のサンプルでは、キーボードの1~9を押すと水滴のイメージが少し変わるようにしてみた。スマホでも見られるが、キーボードによる水滴の変更はできない。

rainyday.jsは、バージョンによって使い方が違うので注意。このサンプルで使っているのは多分古いバージョン。

f:id:art2nd:20180811122838j:plain

二つ目は、「jQuery Ripples」。

マウスの動きに合わせて、水の波紋が広がるような効果を与える。スマホには対応していない。以下のサンプルでは、キーボードの1~9を押すと波紋のイメージが変わるようにしてみた。

f:id:art2nd:20180811122831j:plain

三つ目は、「Sechelt」。

水滴や波紋ではなく、水面を走るような画像が現れる。シンプルながら、引き込まれるような爽快な画面。スマホでは画面サイズが合わず満足な画面にはならない。

Sechelt

f:id:art2nd:20180811122820j:plain