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
波の数を多くしたり少なくしたりできます。

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

メタリックなロゴデザイン20前のページ

レスポンシブにも対応している人気のjQueryプラグインのスライダー「Nivo Slider」の使い方次のページ

関連記事

  1. Random Quote Machine

    JavaScript

    ランダムにテキスト(クオート)を表示させる「Random Quote Machine」

    Random Quote Machineは、設定したデータのなかからラ…

  2. JavaScript

    シンプルでスワイプにも対応したスライダーならSimple jQuery sliderがオススメ

    シンプルでスマホのスワイプにも対応したスライダーを実装したいって時にオ…

  3. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのif文を使ってタグやクラス名によって条件分岐するやり方

    jQueryで普通にif文を使った条件分岐のやり方です。指定したタグや…

  5. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

  6. Babylon Grid

コメント

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

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

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP