JavaScript

水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

面白そうなプラグインだったので使ってみました。画像を指定するとその画像が垂直反転してゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」です。これにより水面に映し出されたような演出効果を出すことができます。素敵ですね。使い方も読み込んでオプションをちょこっとセットするだけなのでとても簡単です。ということで以下使い方です。

[ads_center]

使い方

jQuery本体とプラグインを読み込みます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="lake.js"></script>

適用したい画像をセレクタに指定してセットします。

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

画像を記述する場合は、同時にstyleにdisplay: noneを指定する必要があります。

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

オプション

オプションを指定することで波打つスピードや高さを調整することができます。

speed
波打つスピードを設定できます。
scale
波の高さです。高くしたり低くしたりできます。
waves
波の数を多くしたり少なくしたりできます。

サイトに「癒し」や「リラックス」といったイメージがほしい時には使ってみても面白いかもですね。以下からダウンロードできます。

関連記事

  1. no-image

    JavaScript

    1日のイベントスケジュールを作成できる「Jquery Layoutday plugin」

    Jquery Layoutday pluginは、1日のイベントスケジ…

  2. Optiscroll

    JavaScript

    縦横に対応したカスタマイズ性に優れたモダンなスクロールバー「Optiscroll」

    Optiscrollは、軽量で高度に最適化されたカスタマイズ性に優れた…

  3. Cube-jQuery-Slider

    JavaScript

    3Dキューブなスライダーを実装できる「Cube-jQuery-Slider」

    Cube-jQuery-Sliderは、3Dキューブなスライダーを実装…

  4. jquery.stepper.js

    JavaScript

    マウス操作で値の増減ができるjQueryプラグイン「jquery.stepper.js」

    jquery.stepper.jsは、マウス操作から手軽に値の増減を行…

  5. no-image

    JavaScript

    オシャレなスクロールエフェクトを実装できる「jQuery Smoove」

    jQuery Smooveは、オシャレなスクロールエフェクトを実装する…

  6. JavaScript

    シンプルでカスタマイズも簡単にできるjQueryプラグイン「Twitter Follow Box W…

    とてもシンプルでカスタマイズもしやすいjQueryプラグイン「Twit…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP