完成サンプルです

こんな感じに仕上げました。

メニューナビゲーションバーを反転させてゆらゆらさせてます。水面に映ってるようなエフェクトです。そのままのエフェクトだとキャラが濃くなってしまうので、白画像を透過させてグラデーションさせてます。

注意点

まず このプラグインは 画像の要素のみにしかききません。imgタグのみです。

つまり、CSS3で加工したナビバーなどでは適用できません。CSSでbackground に指定した画像でもダメです。適用したい要素は必ず HTMLでimgタグを使用してください。

実装コード

jQuery

[javascript]

jQuery(document).ready(function(){
jQuery(function(){
jQuery("#hogeImg img").lake({
‘speed’: 0.3,
‘scale’: 0.3,
‘waves’: 7
});
});
});

[/javascript]

ゆらゆらさせたい要素を指定して、オプションの値を入れていくだけです。

オプションの効果

HTML

[html]

<div id="hogeWrap">

<img src="waveNav.png" alt="waveNav" width="500" height="60" style="display: none;">

<ul id="hogeNav">
<li>メニュー１</li>
<li>メニュー２</li>
<li>メニュー３</li>
<li>メニュー４</li>
<li>メニュー５</li>
</ul>

</div>

[/html]

エフェクトさせたい要素は display: none させてください。プラグイン側のルールだそうなので、必須です。

ナビの部分のリストと、ゆらゆらさせる画像のimgを用意して CSSの position: absolute で重ねてます。

さっきも書きましたが、ul や li にはゆらゆらさせるエフェクトの指定ができません。ので、こうしてみました。

HTMLを汚したくない！キレイに書きたい！っていう場合は、擬似要素だったり jQueryで要素を追加することも可です。その場合のコードはこんな感じで。

jQueryでHTML要素を追加

[html]

<div id="hogeWrap">

<ul id="hogeNav">
<li>メニュー１</li>
<li>メニュー２</li>
<li>メニュー３</li>
<li>メニュー４</li>
<li>メニュー５</li>
</ul>

</div>

[/html]

[javascript highlight=”3″]

jQuery(document).ready(function(){

jQuery("#hogeImg").prepend("<img src=’waveNav.png’ alt=’waveNav’ width=’500′ height=’60’ style=’display: none;’>");

jQuery(function(){
jQuery("#hogeWrap img").lake({
‘speed’: 0.3,
‘scale’: 0.3,
‘waves’: 7
});
});
});

[/javascript]

jQueryの prepend を使用して、id=”hogeWrap” のなかの先頭にimg要素を追加します。

これでHTMLだけをみたら、普通のナビゲーションメニューのようなリストスタイルのみになります。

最後に一手間。ゆらゆらを薄くする

上記で実装までは出来ているんですが、それだとキャラが濃ゆくなってしまいます。要素によってはいいんですが、ナビゲーションバーとかでは ちょっと主張が強すぎです。

ので、少し色味を薄くして、下にいくにつれて フワーっ と消える感じにしました。

ただ、プラグインのオプションではそういった設定がないので、力技で実装してます。

まずはこういった透過してるグラデーションの画像をつくります。IE無視ならCSS3でも構いません。

まんなかの透けてる白い四角です。バックは見やすくするのに適当なテクスチャを敷いてます。

その要素をゆらゆらしてる箇所にかぶせます。こう！

[html]

<div class="hogeWrap">

<ul class="hogeNav">
<li>メニュー１</li>
<li>メニュー２</li>
<li>メニュー３</li>
<li>メニュー４</li>
<li>メニュー５</li>
</ul>

<div class="hogeWhite">
<!– 白い四角にする空要素です。CSSのpositionで重ねます。 –>
</div>

</div>

[/html]

してみました。

プラグイン作成者様のダウンロード先

lake.js

です。

今回のプラグインはユニークな視点のモノだったので、私なりに実用性を何か付け足せないか、的な記事にしてみました。

以上です！！