PAGETOP

水滴が落ちたような水面エフェクトが美しい「Raindrops.js」

水滴が落ちたような水面エフェクトが美しい「Raindrops.js」

コンテンツの区切りに水滴を落としたような、波打つエフェクトを見せてくれる「Raindrops.js」をご紹介します。
画像ではわかりにくいので、まずはサイトをご覧下さい。

Raindrops.js

ぽちゃん、と音がしそうな幻想的な効果が素敵です。
EXAMPLESを見ると、波形のアニメーションは6種用意されています。
激しい雨のような効果もありますね。

ダウンロード

GitHub

ZIPファイルの中身はシンプルにjs本体のみです。

使い方

①ファイルの読み込み

raindrops.jsのほかにjQueryとjQuery UIが必要です。
<body>の閉じタグ直前で読み込みます。
下記では最新のjQueryを使用していますが、2.1.4がIE9以下をサポートしていないので、9以下のIEでも利用したい場合は古いバージョンにしたほうがいいでしょう。

[HTML]

<body data-rsssl=1>
  ...
  コンテンツ
  ...
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>   <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="js/raindrops.js"></script>
</body>

②ボックスにidを付ける

水滴効果を付けたいボックスに任意のidを付与します。

[HTML]

<div id="drop">
水滴コンテンツ
</div>

③実行コードを書く

実行用コードを記述します。
記述の場所は、jsファイルの読み込み箇所の後、<body>の閉じタグ直前がいいでしょう。

<script>
$(function(){
jQuery('#drop').raindrops();
});
</script>

オプション

指定方法は次のとおり。

<script type="text/javascript">  
jQuery('#example').raindrops(
{color:'#ffffff',
canvasHeight:100});
</script>

主なオプションは次のとおりです。

  • color：水滴の色
  • waveLength：波形の長さ。デフォルトは340で、数字を大きくすると波が細かくなります。
  • frequency：落ちる水滴の数。デフォルトは3で、数字を大きくすると激しい雨を作れます。
  • waveHeight：波の高さ。デフォルトは100で、数字を大きくすると波が高くなります。
  • density：波紋の広がり。デフォルトは0.02で、数字を大きくすると波紋が小さくなります。
  • rippleSpeed：波紋のスピード。デフォルトは0.1で、数字を大きくすると波紋の動きが速くなります。
  • canvasWidth：水面の幅。デフォルトは親要素の100%です。
  • canvasHeight：水面の高さ。デフォルトは親要素の50%です。
  • rightPadding：アニメーションによって生じた、水面右端の不要なすき間を埋めるために設定します。デフォルトは20です。

オプションの数字を変えるだけで様々な水滴の感じを表すことができますね。興味がありましたら、ぜひ試してみてください。

jQueryについて