メニューなど、目立たせたい要素を反射させて かつ波打たせてゆらゆらさせてみる

2012.7.25 jQuery animals-q-c-1000-400-6

こんにちは! 夏真っ盛りで 一日中冷えビタをしていないと頭痛の止まらない いわだて (@dutchisover) です!

完成サンプルです

  • メニュー1
  • メニュー2
  • メニュー3
  • メニュー4
  • メニュー5

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

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

注意点

CautionWave

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

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

実装コード

jQuery

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

オプションの効果

オプション エフェクトの効果内容
speed 波打ちのスピードです。数値を大きくするほど速くゆらゆらします。
scale 波の高さです。数値を大きくするほど横にゆらぎます。
waves 波の数です。数値を大きくするほどゆらゆらの感覚が細かくなります。

HTML

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

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

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

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

jQueryでHTML要素を追加

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

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

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

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

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

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

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

Transparent

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

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

してみました。

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

です。

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

以上です!!

最近の記事

Sponsored