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

Post on:2012年4月23日

sponsorsr

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

[ad#ad-2]

lake.jsのデモ

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

[ad#ad-2]

画像は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>

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

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