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

    いろんなデザインのツールチップを実装できる「Opentip」

    Opentipはいろんなデザインのツールチップを実装することができるJ…

  2. nuContextMenu

    JavaScript

    モダンなコンテキストメニューを実装できる「nuContextMenu」

    nuContextMenuはモダンで軽量なコンテキストメニューを実装で…

  3. jQuery Pit-scheduler v2.0
  4. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

  5. megamenu.js

    JavaScript

    レスポンシブでスマートなメガメニューを実装できる「megamenu.js」

    megamenu.jsはjQueryを使ったレスポンシブでスマートなメ…

  6. Flex-box Gallery

    JavaScript

    ランダムサイズの画像をかっこいいギャラリーにしてくれる「Flex-box Gallery」

    Flex-box Galleryは、ランダムサイズによる画像たちをかっ…

コメント

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

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

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP