Home > 技術 > JavaScriptでロールオーバーアニメーション

JavaScriptでロールオーバーアニメーション

trick7 - ロールオーバー効果へのこだわりを見て、うわ~最後のほうをTweenさせるだけでこんなに気持ちいのかとJavaScript版を作ってみました。

しかし、やっぱりFlashJavaScriptの違い顕著に出てしまったのですがそれっぽくなったと思います。

JavaScriptソースコード

2つのdiv要素を用意しておいて、1つ目の要素にマウスが乗ったときに2つ目の要素をアニメーションさせています。
1つ目の要素を覆うように2つ目の要素が重なるので、そのタイミングでmouseoverが発生してしまうためz-indexでアニメーションする要素を後ろ側に隠しています。

それとanimateメソッドでwidth:0pxからアニメーションするのではなく、いったんcssメソッドを使ってwidth:200pxまで進めておいて、最後の50pxをアニメーションするようにしています。
このひと手間でオモロ~になりました。

続きで動作確認。


追記:
ごめんなさい、ブログのデフォルトスタイルが効いてIE6で変なところにサンプルが表示されるかもです。
う~んやっぱりこうゆうのやるときはそれ用のページ作ったほうがいいんですかね。

Flashだったらスタイルの影響を受けないけどw

カラフルな要素があっちいったりこっちいったり - xyz.jsとかもちょっとアニメーションを面白くするだけで雰囲気が全然変わってくるんでしょうね。

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1148
Listed below are links to weblogs that reference
JavaScriptでロールオーバーアニメーション from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > JavaScriptでロールオーバーアニメーション

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top