要素の区切り線に、水面に水滴が落ちたときのような波紋を発生させる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();
実装デモ
最も簡単な方法で、とりあえず試してみましょう。
title="html"] <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>
title="css"]
body{
background-color: #00aeef;
margin: 0;
}
#target{
background-color: #fff;
width: 100%;
height: 200px;
}
title="javascript"]
&(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の設定ができます。
ちょっと遊んでみた
海っぽい感じにしてみた
波の波及度合いと高さなどを修正し、ゆるやかな波になるようにしました。なんか海っぽい。なんとなく海っぽい。
コードはこっちから見れます。
サンドバッグゼリー
サンドバッグゼリーです。
コードはこっちから見れます。