マウスホバーでキラッとするエフェクトいろいろ

Category : CSS, JavaScript, jQuery

Google の +1 ボタンが検索結果に反映されるようになりましたね。
あのボタン、検索結果アイテムにマウスホバーでキラッとするんですが、それを見ていて以前 jsdo.it で作ったのを思い出したので、fork されたものも含めてまとめてみようかと思います。

作ろうと思ったきっかけは、AddyOsmani.com の下記のエントリーでした。

ギャラリー自体もすごいんですが、このエフェクトがかっこよかったので、とりあえず作ってみようと思ってやってみました。

コードが色々とアレな感じですが、動きだけは実現できました。
その後、@GeckoTang さんが fork してくれました。
こっちのほうが分かりやすいです。

また、@Tenderfeel さんが fork してくれて MooTools 版を作りました。

そして、ついこの間 CSS3 の transition を使ったものを見かけました。
News Links N.1 で紹介したものです。
アイコンを背景画像として表示しているのがポイントですね。

以上で紹介を終わります。
こういうのはやりすぎるとウザいだけですが、上手く使えば「おっ」っていう感じでちょっとした効果を演出できるんじゃないかなーと思います。

あ、ちなみに Google のは CSS スプライト用の画像を順番に表示しています。

Leave a Reply