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. Animocons

    JavaScript

    アイコンに素敵なアニメーションを実装できる「Animocons」

    Animoconsはアイコンにさまざまなアニメーションを加えることがで…

  2. jQuery Glow
  3. SVG 3D Tag Cloud jQuery Plugin
  4. JavaScript

    リストなど複数の要素をランダムにフェードで表示していくjQueryプラグイン「champagne.j…

    どこかで使う機会がありそうな感じのjQueryプラグイン「champa…

  5. jquery.matchHeight.js
  6. Multi-Step-Form-Js

コメント

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

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

最近の記事

  1. M360bt
  2. BQ-CASE/1

アーカイブ

PAGE TOP