表面がゆらゆらゆれる水（アクア）系のripples.jsを実装してみた

あつい！夏ですね~(*_*)

ということで暑さを吹っ飛ばす？アクア系のJSでサイトに動きをつけるときに
おすすめなJSプラグインをご紹介します。

画面の上に水をしいたみたい！波紋ができるjquery.ripples.js

jquery.ripples.jsは水溜まりに波紋が広がるような表現が作れるプラグインです。
【URL】ダウンロードはこちら

まずはデモから~！
マウスを動かすと水の波紋のようなものが出ると思います。

See the Pen WaterRippleJSdemo by sayuri (@giraffeweb) on CodePen.0

実装はものすごく簡単！！

body直前にscriptを読み込ませてください。
上記URLからダウンロードしてもよいし、私はCDNからひっぱってきています。

<div class="water_wrap">
</div>

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js">
</script>

cssは背景に画像を準備してあげるだけ。

.water_wrap {
  width: 100vw;
  height: 100vh;
  background-image: https://creatornote.nakweb.com/wp-content/themes/giraffe/images/water.jpg;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #fff;
  display:block;
}

JSは次のような感じです。様々なオプションを設定できます。

$(function(){
    let $water = $('.water_wrap');
    $water.ripples({
    resolution: 400,
    dropRadius: 25,
    perturbance: 0.05
    });
});

実装できるオプションは以下の通りです♪
■imageUrl
画像を指定できます。

■dropRadius
波紋の大きさを調整できます。

■perturbance
波紋が生み出すブレを調整できます。

■resolution
波紋の広がりの速度

念のため、このプラグインはcanvas要素を生成して、そこに波紋を描く仕組みです。
そのため複雑なHTMLにすると挙動がかなり重くなります。
またスマートフォンでは挙動しないので、そこらへんに理解のある方のみ、試してサイトに導入してみてください。

Share: