面白そうなプラグインだったので使ってみました。画像を指定するとその画像が垂直反転してゆらゆらと波打つ動きを与えてくれる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
- 波の数を多くしたり少なくしたりできます。
サイトに「癒し」や「リラックス」といったイメージがほしい時には使ってみても面白いかもですね。以下からダウンロードできます。