CSS3を使ったマウスオーバーフリップアニメーションと非対ブラウザ用にjqueryアニメーションのサンプルソース

CSS3を使ったアニメーションは従来のjavascritpアニメーションに比べ、軽く動作が美しい、表現の幅も広いですが、非対応のブラウザの場合、とても残念になります。
今回はマウスオーバーでフリップアニメーションをCSS3で行い、非対応ブラウザは分岐で別動作をさせせるサンプルを書きます。

必要なファイル

jquery.js
modernizr.js

HTML

CSS

Javascript

CSS3対応と非対応ブラウザで動作を別けるためにmodernizr.jsで分岐処理を入れます。
クラス名flipscrollを対応ブラウザはflipboxにリネーム。

.flipboxはマウスオーバーで.flipクラスが追加されアニメーションを開始。

.flipscrollはjqueryのhoverイベントでアニメーションをさせます。
今回は簡単に.show()と.hide()メソッドで入れ替えただけです。

動作サンプル

1
2

ちなみにcss3非対応だと入れ替えになるだけの予定ですが上記ソースは未確認。

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL