マウスホバーでキラッとするエフェクトいろいろ
Google の +1 ボタンが検索結果に反映されるようになりましたね。
あのボタン、検索結果アイテムにマウスホバーでキラッとするんですが、それを見ていて以前 jsdo.it で作ったのを思い出したので、fork されたものも含めてまとめてみようかと思います。
作ろうと思ったきっかけは、AddyOsmani.com の下記のエントリーでした。
ShineTime — A Kick-Ass New jQuery & CSS3 Gallery With Animated Shine Effects
ギャラリー自体もすごいんですが、このエフェクトがかっこよかったので、とりあえず作ってみようと思ってやってみました。
コードが色々とアレな感じですが、動きだけは実現できました。
その後、@GeckoTang さんが fork してくれました。
こっちのほうが分かりやすいです。
また、@Tenderfeel さんが fork してくれて MooTools 版を作りました。
そして、ついこの間 CSS3 の transition を使ったものを見かけました。
News Links N.1 で紹介したものです。
アイコンを背景画像として表示しているのがポイントですね。
以上で紹介を終わります。
こういうのはやりすぎるとウザいだけですが、上手く使えば「おっ」っていう感じでちょっとした効果を演出できるんじゃないかなーと思います。
あ、ちなみに Google のは CSS スプライト用の画像を順番に表示しています。
