【jQuery】境界線を波打たせるRaindropsを導入して遊んでみた

Pocket
LINEで送る

要素の区切り線に、水面に水滴が落ちたときのような波紋を発生させるjQuery UIプラグインRaindrops.jsを実装してみました。色々とオプションを修正したサンプルも作っています。

raindrops.jsとは

セクション間の境界線をcanvasを使って水面に見たて、しずくを落としたような波紋のエフェクトを表示させてくれるjQueryUIのプラグインです。オプションも複数用意されていますので、色々なエフェクトを付け加えることができます。

導入について

raindrops.jsをダウンロード

ダウンロードはこちら。【d-harel/raindrops – github

ダウンロードしたファイルをサーバーにアップロードしておきましょう。

プラグインの呼び出し

raindrops.jsはjQueryUIに依存したプラグインです。なのでjQueryとjQueryUIを先に呼び出し、その後に上でダウンロードしたraindrops.jsを呼び出しましょう。

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
   <script src="アップロード先のURL/raindrops.js" type="text/javascript"></script>
   

raindropsの設定方法

raindropsの指定方法は下の通りです。ここまできたら後は簡単なHTML/CSSとjQeuryの記述を行うだけで、波紋のような境界線を作ることができます。

   $('#指定ID').raindrops();  
   

実装デモ

最も簡単な方法で、とりあえず試してみましょう。

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
   <script src="http://nkmrkisk.com/demo/2016/js/raindrops.js" type="text/javascript"></script>
   <div id="target"></div>
   
   body{
     background-color: #00aeef;
     margin: 0;
   }
   #target{
     background-color: #fff;
     width: 100%;
     height: 200px;
   }
   
   &(function(){
     &('#target').raindrops();  
   })
   

See the Pen [jQuery]Raindropsコンテンツの区切りを波打たせる by nkmrkisk (@rekid) on CodePen.

オプション設定

raindropsでは、個人の好みに合わせて設定を変えられるように、いくつかのオプションを設定することができます。オプションで設定できる項目を見ていきましょう。

オプションの設定方法

   &(function(){
     &('#target').raindrops( {
           color: '#f00',
           frequency: 12
       });
   })
   

waveLength

波の起点とその波及先になる要素の数を指定できます。波の発生は全てこの点を起点にされています。数が少ない(100以下になる)とまんべんなく点が行き渡らず波ではなくなってしまい、逆に数値が大きすぎると波がすごく小さく見えてしまいます。デフォルトは340

canvasWidth

canvasの横幅の指定になります。rightPaddingとの合計がcanvasの全幅になります。デフォルトは100%

canvasHeight

canvasの高さです。デフォルトは50%

color

canvasの水面下のカラーを指定できます。デフォルトは#00aeef

frequency

波紋の発生頻度を設定できます。数を多くすると大雨でも降っているかのようなエフェクトを作ることもできます。デフォルトは3

waveHeight

波の高さを指定できます。デフォルトは100

density

波の密度を指定できます。数値が小さいほどより遠くまで波が波及し、大きくなるに連れて波及が弱くなり、1で波が発生しなくなります。波紋の影響度合いのような感じです。デフォルトは0,02

rippleSpeed

波紋の速度を指定できます。数を大きくすると波ではなくピンと張った糸の様になります。デフォルトは0.1

rightPadding

右のパディングを設定できます。

position

ポジションの設定ができます。

positionBottom

CSSのbottomの設定ができます。

positionLeft

CSSのLeftの設定ができます。

ちょっと遊んでみた

海っぽい感じにしてみた

海っぽい波
波の波及度合いと高さなどを修正し、ゆるやかな波になるようにしました。なんか海っぽい。なんとなく海っぽい。
コードはこっちから見れます。

サンドバッグゼリー

サンドバッグゼリー
サンドバッグゼリーです。
コードはこっちから見れます。

SNSでもご購読できます。