ホバー時にブロックの背景色を滑らかにアニメーションするJSサンプル
2008年09月25日-![はてなブックマーク](http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2008/09/js_7.html)
スポンサード リンク
Using jQuery for Background Image Animations - Snook.ca
ホバー時にブロックの背景色を滑らかにアニメーションするJSサンプル。
デモページ
![](http://phpspot.net/php/webimager/admin2/data/ccbf750d0965fc82bc1375224d671d10.png)
デモページを見ればわかりますが、カーソルをあわせると滑らかに背景がアニメーションされます。
アニメーションの仕方がなかなか良くて、左→右や、上→下のように方向を指定できます。
当然ですが、Flashを使わなくてもJSでこうしたことが出来て、今までありそうでしたが、そんなに多く見かけることがなかったテクニックではないでしょうか。
覚えておくとふとしたときに使えそうです。
ホバー時にブロックの背景色を滑らかにアニメーションするJSサンプル。
デモページ
![](http://phpspot.net/php/webimager/admin2/data/ccbf750d0965fc82bc1375224d671d10.png)
デモページを見ればわかりますが、カーソルをあわせると滑らかに背景がアニメーションされます。
アニメーションの仕方がなかなか良くて、左→右や、上→下のように方向を指定できます。
当然ですが、Flashを使わなくてもJSでこうしたことが出来て、今までありそうでしたが、そんなに多く見かけることがなかったテクニックではないでしょうか。
覚えておくとふとしたときに使えそうです。
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 可愛くアニメーションする「beautifully crafted animated icons」
- アイソメトリックなアイコンがアイコンがPNG,SVGでゲットできる「Isoicons」
- ユニークなカタカナフォントtorisippo
- 美しいメッシュグラデーションをCSSで簡単に取得できる「MSHR」
- TailwindCSSなサイトで使える100以上のアニメーションエフェクト「animata」
- SVG形式のテック系企業のロゴを簡単にゲットできる「Svgl」
- 統一感のある色味を一括生成できるツール「The good colors」
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 過去のエントリ