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. flexible-bootstrap-carousel
  2. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

  3. no-image

    JavaScript

    シンプルなドロップダウンメニューを実装できるjQueryプラグイン「snakeMenu」

    snakeMenuはシンプルなアニメーションによるドロップダウンメニュ…

  4. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

  5. Timeliny

    JavaScript

    レスポンシブ対応の年ベースによるjQueryタイムライン「Timeliny」

    Timelinyはレスポンシブに対応した年ベースによるタイムラインを実…

  6. TextTailor.js

    JavaScript

    コンテナ内のフォントサイズを自動リサイズしてくれるjQueryプラグイン「TextTailor.js…

    TextTailor.jsはブラウザ幅に合わせてコンテナ内のテキストの…

コメント

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

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

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP