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

動作サンプル

関連記事

InstagramAPI 設置メモ。自分の投稿リストを取得するだけだったのにいろいろと面倒だったので、後からの覚書。

HTML5+CSS3でプレゼン資料を作るjQueryプラグイン「jmpress.js」

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

この投稿へのコメント

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

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

InstagramAPI　設置メモ。自分の投稿リストを取得するだけだったのにいろいろと面倒だったので、後からの覚書。

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