[JS]コンテンツの区切り線を水面に見立てて、ぽちゃんたぷんっと波立たせる癒やし系スクリプト -Raindrops.js

コンテンツの区切りなどの線を水面に見立てて、滴を落としたように波立たせる素敵なアニメーションを簡単に実装できるスクリプトを紹介します。

↓区切り線がぽちゃんたぷんっと波立ちます。

デモのアニメーション

Raindrop.js
Raindrops.js -GitHub

Raindrops.jsのデモ

水面の設定はいろいろでき、水面の高さや色、滴の数や間隔や勢いなどを調整できます。
静かな水面や激しい嵐も再現できます。

デモのキャプチャ

Raindrop.jsのデモ

スクリプトのページでもコンテンツごとの区切りに使用されています。

デモのキャプチャ

Raindrop.js

ヘッダやフッタあたりに少し適用するのはいい感じですね。

Raindrops.jsの使い方

Step 1: 外部ファイル

当スクリプトとjquery.jsを外部ファイルとして記述します。

<body>
  ...
  コンテンツ
  ...
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/raindrops.js"></script>
</body>

Step 2: HTML

水面のアニメーションを適用する要素を用意します。

<div id="example1"></div>

Step 3: JavaScript

適用する要素をjQueryのセレクタで指定し、スクリプトを実行します。

jQuery('#example1').raindrops();

デモにあるように、オプションで水面の位置やアニメーションをいろいろ設定できます。
位置とカラーを変更する時は、こんな感じに。

jQuery('#example2').raindrops(
{color:'#99d4a5',
canvasHeight:200});

アニメーションの設定は、こんな感じに。

jQuery('#example5').raindrops(
{color:'#f77b7b',
canvasHeight:150, 
waveLength: 100,
 rippleSpeed: 0.05, 
density: 0.04});

sponsors

top of page

©2018 coliss