ページ遷移やローディングで使えそうなパラパラめくれる画面を作ってみたよ。

この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。Toshikuraです。今回のTipsは【ページ遷移やローディングで使えそうなパラパラめくれる画面を作ってみたよ。】です。最近ちょっと可愛いローディングを見つけたので、簡単にアニメーションの速度やタイミングを変更できるように試してみました。

実装方法

コードの流れはシンプルです。画面の分割数を指定しfor文でappend、その際それぞれの要素にtransition-delayを設定しCSS3アニメーションをすこしづつ遅延させています。分割には%を使用していますのでレスポンシブでも使用可能かと思います。CSS3transitionを使用していますのでブラウザは選びますが、使い方によっては面白くなるかなと思います。


<script src="js/jquery-1.X.X.min.js"></script>
</head>
<body>
<a href="" id="btn">START</a>
<style>
.paper_body{
float:left;
overflow: hidden;
-moz-perspective:2000px;
-webkit-perspective:2000;
-o-perspective:2000;
-ms-perspective:2000;
}
.paper{
opacity: 1;
height:100%;
width: 100%;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-origin: center left;
-ms-transform-origin: center left;
-o-transform-origin: center left;
transform-origin: center left;
}
.activate .paper{
opacity: 0;
-webkit-transform: rotateY(120deg);
-ms-transform: rotateY(120deg);
-o-transform: rotateY(120deg);
transform: rotateY(120deg);
}
</style><script>
var gridX = 4; // 横方向の分割数
var gridY = 3; // 縦方向の分割数
var colors = ['#1ABC9C','#2ECC71','#3498DB']; // パネルの色
var total = 2600; // アニメーションの合計時間
var pnum = gridX*gridY;
var paperspeed = (total/1000)/pnum;
function setting(){
    winW = $(window).width();
    winH = $(window).height();
    gridW = (winW/gridX)/(winW/100);
    gridH = (winH/gridY)/(winH/100);
}
$(function(){
    setting();
    $('body').append('<div class="paper_wrap"></div>');
    for (var i = gridX*gridY – 1; i >= 0; i–) {
        var col = colors[Math.floor(Math.random()*colors.length)];
        var delay = i*paperspeed;
        var html = '<div style="width:'+gridW+'%;height:'+gridH+'%;" class="paper_body"><div class="paper" style="background:'+col+';transition:all '+paperspeed+'s ease-out '+delay+'s;"></div></div>';
        $('.paper_wrap').append(html);
    };
    $('#btn').on('click',function() {
        // #btn をクリックでアニメーションが開始するように指定している。
        $('html').addClass('activate');
        setTimeout(function(){
            $('.paper_wrap').fadeOut(300);
        },total);
        return false;
    });
});
</script>
</body>

対応ブラウザ

IE10,chrome,Firefox,Opera

開始のタイミング

アニメーション開始のタイミングは「#btn をクリックでアニメーションが開始」としています。ただ開始の操作自体はhtmlやbody等の親要素に「.activate」を追加し、その後全体をfadeOutという流れですので以下のようにする事も可能です。

ウィンドウ読み込み完了時実行


$(window).on(‘load’,function() {
    $(‘html’).addClass(‘activate’);
    setTimeout(function(){
        $(‘.paper_wrap’).fadeOut(300);
    },total);
});

その他デモ

以上になります。