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

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

必要なファイル
HTML
CSS
Javascript
動作サンプル

必要なファイル

jquery.js
modernizr.js

HTML

<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>

...

</div>

CSS

/* ======================
　　フリップ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;
}

/* ======================

　　フリップ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()メソッドで入れ替えただけです。

    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();
        });

    }

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();

});

}

動作サンプル

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

へっぽこ開発室

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

必要なファイル

HTML

CSS

Javascript

動作サンプル

この投稿へのコメント

コメントを残すコメントをキャンセル

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

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

必要なファイル

HTML

CSS

Javascript

動作サンプル

関連記事

【Movable Type】jqueryで新着投稿にnewマークを付ける

jquery 要素の作成で第二引数でまとめて

ブラウザ幅に応じてレウアウトをかっこよく調整、jQueryプラグイン「Isotope」

この投稿へのコメント

コメントを残す コメントをキャンセル

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

コメントを残すコメントをキャンセル