マウスホバーでキラッとするエフェクトいろいろ
公開：
更新：
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スプライト用の画像を順番に表示しています。
2020年1月7日 追記：
『jsdo.it』は2019年に閉鎖されましたので、回収できた自分のコードだけデモページに移行しました。