背景画像に水の波紋が広がるような動きを加えることができるjQueryプラグイン「jQuery Ripples」

背景画像に水の波紋が広がるような動きを加えることができるjQueryプラグイン「jQuery Ripples」

背景画像に水の波紋が広がるような動きを加えることができるjQueryプラグイン「jQuery Ripples」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • Youtube動画変換・ダウンロードおk!
  • このエントリーをはてなブックマークに追加

jQuery Ripplesは、背景画像に水の波紋が広がるような動きを加えることができるjQueryプラグインです。

挙動については、以下デモページにてご確認ください。画像にマウスを乗せたり、クリックすると波紋が広がります。

デモページを見る

スポンサードリンク

jQuery Ripplesの導入手順

まずは、GitHubからjQuery Ripplesをダウンロードします。ダウンロードしたファイルを解凍し、distフォルダ内にあるjquery.ripples-min.jsをサーバー上にアップロードします。

jQuery本体とjquery.ripples-min.jsを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery.ripples-min.js"></script>

上記コードは、</body>の直前に追加すればOKです。

背景画像を設置する箇所のHTMLをマークアップします。シンプルにdiv要素のみにしています。

<div class="sample"></div>

CSSで背景画像を設置します。

.sample {
width: 960px;
height: 640px;
background: url(images/sample.jpg) no-repeat;
}

最後にjQuery Ripplesを動かすためのスクリプトを記述します。jQuery本体とjquery.ripples-min.jsよりも後に記述してください。

<script>
$(function(){
let $ripp = $('.sample');
$ripp.ripples({
resolution: 300,
dropRadius: 30,
perturbance: 0.06
});
});
</script>

「.sample」の部分は、背景画像を設置している箇所のクラスやIDを指定します。

オプションのresolutionは、値が大きいほど波紋がより広がります。初期値は256です。dropRadiusは、波紋のサイズです。初期値は20。perturbanceは屈折量で、初期値は0.03です。

あとがき

不思議な効果を加えることができますね。ちょっと変わった動きを加えたいと思ったら、ぜひお試しください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。