[JS]画像を湖面にゆらゆらと映し出す癒し系スクリプト -lake.js

ゆらゆらとさざ波を立てている湖面に映し出したようなエフェクトを画像に適用するjQueryのプラグインを紹介します。

lake.js
lake.js -GitHub

[ad#ad-2]

• lake.jsのデモ
• lake.jsの使い方

lake.jsのデモ

湖面のエフェクトはCanvasを使用しており、景観写真などをゆらゆらと湖面に映し出します。

デモページ

[ad#ad-2]

lake.jsの使い方

HTML

画像はimg要素で配置し、「display: none;」で一旦非表示にします。

<img id="lake-img" src="lake.png" style="display: none;"/>

画像は下記のように、上半分のみ用意します。

使用している画像：lake.png

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script src="jquery.js"></script>
<script src="lake.js"></script>

JavaScript

jQueryのセレクタで適用する画像を指定し、スクリプトを実行します。
オプションではアニメーションのスピードやさざ波の量などを調整できます。

<script>
$(function() {
  $('#lake-img').lake({
    'speed': 1,
    'scale': 0.5,
    'waves': 10
  });
});
</script>