CSS3を使ったマウスオーバーフリップアニメーションと非対ブラウザ用にjqueryアニメーションのサンプルソース
CSS3を使ったアニメーションは従来のjavascritpアニメーションに比べ、軽く動作が美しい、表現の幅も広いですが、非対応のブラウザの場合、とても残念になります。
今回はマウスオーバーでフリップアニメーションをCSS3で行い、非対応ブラウザは分岐で別動作をさせせるサンプルを書きます。
必要なファイル
jquery.js
modernizr.js
HTML
1 2 3 4 5 6 7 8 |
<script src="./js/1.10.2.jquery.min.js"></script> <script src="./js/modernizr.js"></script> ... ... <div class="flipscroll"> <div class="front">1</div> <div class="back">2</div> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
/* ====================== フリップCSS3 アニメーション ===================== */ .flipbox{ position: relative; -webkit-perspective:800px; -moz-perspective:800px; -ms-perspective:800px; -o-perspective:800px; perspective:800px; } .flipbox .front, .flipbox .back{ position: absolute; top: 0; left: 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .flipbox .front { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } .flipbox.flip .front { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .flipbox .back { -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); -ms-transform: rotateY(-179deg); -o-transform: rotateY(-179deg); transform: rotateY(-179deg); } .flipbox.flip .back{ -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } .flipscroll{ position: relative; } .flipscroll .front, .flipscroll .back{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .flipscroll .back{ display: none; } |
Javascript
CSS3対応と非対応ブラウザで動作を別けるためにmodernizr.jsで分岐処理を入れます。
クラス名flipscrollを対応ブラウザはflipboxにリネーム。
.flipboxはマウスオーバーで.flipクラスが追加されアニメーションを開始。
.flipscrollはjqueryのhoverイベントでアニメーションをさせます。
今回は簡単に.show()と.hide()メソッドで入れ替えただけです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
if ($('html').hasClass('csstransforms3d')) { $('.flipscroll').removeClass('flipscroll').addClass('flipbox'); $('.flipbox').hover(function() { $(this).addClass('flip'); }, function() { $(this).removeClass('flip'); }); } else { $('.flipscroll').hover(function() { panel = $(this); panel.children('.front').hide(); panel.children('.back').show(); }, function() { panel = $(this); panel.children('.back').hide(); panel.children('.front').show(); }); } |
動作サンプル
1
2
ちなみにcss3非対応だと入れ替えになるだけの予定ですが上記ソースは未確認。
この投稿へのトラックバック
トラックバックはありません。
- トラックバック URL
この投稿へのコメント