スクロール時にCSS3 Animationsを一時停止したらFPSがけっこう良くなった

, ,

パララックスなサイトを作る際に、スクロールに応じてJSで要素を動かすと思うのですが、その時にある場所でCSS3 Animationsが動いていると、スクロールがカクついてしまい、FPSが残念な状態になります。

そこで、スクロールが動き出した時にCSS3 Animationsを止めて、スクロールを止めた時にCSS3 Animationsを再度動作させるという処理を加えれば、スクロールがカクつくことなく、スムーズになります。

スクロールや、リサイズといったJavaScriptのイベントは連続で処理されます。そういったイベントの「開始した時」「動作している時」「停止した時」の状態が取れるjQueryのプラグインを作成しました。

jQuery.MovingState

このプラグインを使い、CSS3 Animationsを動的に操作してみたいと思います。

CSS3 Animationsを一時的に停止する方法

まず、CSS3 Animationsを止める方法です。
CSS3 Animationsはある要素に効かせているanimationプロパティに、noneを指定すれば止めることができます。再度再生する場合は、animationプロパティに空の文字列を挿入すれば動作します。


// jQuery1.9.1を使用しています。

// 停止
$('.animation').css('animation', 'none');

// 動作
$('.animation').css('animation', '');

jQuery.MovingStateを使って処理する

jQuery.MovingStateを使って処理してみたいと思います。下記のような書き方で動作します。


$(window).movingstate({

    // イベント名の記述
    event: 'scroll',

    // 開始した時
    start: function() {
        $('.animation').css('animation', 'none');
    },

    // 動作している時
    // move: function() {
    //     // 今回は何も記述しません。
    // },

    // 停止した時
    end: function() {
        $('.animation').css('animation', '');
    },

    // moveからendまでの時間(ミリ秒)
    delay: 500
});

スクロールを「開始した時」にCSS3 Animationsを停止し、スクロールを「停止した時」にCSS3 Animationsを再度動作させています。

スクロールの動作が軽くなったことが確認できたかと思います。CSS3はアニメーションに限らず、様々なプロパティが追加されました。ですが、むやみに使ってしまうと描画に影響を与えてしまい、かえって重くなってしまうこともあります。今回行った処理みたいに一時的に回避させるなどして下さい。プラグインも是非お使いになって下さい。