2017-8-19

JSでスクロールに応じて起動するアニメーションの実装例

スクロールに応じてアニメーションを起動するスクリプトを組む機会があり、以後同様の物を組む必要が出た時の為のメモ

DEMO

ポイント

data 属性による微調整

以下のように、data 属性を使用してアニメーションの微調整を出来るようにしている。

<p class="js-animation_target" data-animation-id="2" data-animation-type="fadeup" data-animation-after="1" data-animation-delay="200">〜</p>

JS では、以下のよう OR 論理演算子を使用して data 属性が設定されている場合のみ値を適用するようなよくあるコードパターンを使用。

var after = $target.data('animation-after') || null;

Promise を使用して特定のアニメーション終了後に起動するよう設定可能に

data-animation-delayのみでもまぁ一応組めるんだけど、「アニメーション間の起動間隔は今のままで、全体をごそっと 100ms 早めたい」って時にそれぞれ delay の値を弄らないといけなくて面倒（そしてよくある）。

data-animation-delayで、特定 id のアニメーションが終了後にアニメーションを実行するように出来るように。

単一 id はもちろん、次のように複数 id を指定してそれら全てのアニメーションが完了した際に実行するようにも出来る。

data-animation-after="[1, 3]">

コードは以下のようにしている。

var promiseList = [];
after.forEach(function(e, i, a) {
  var p = new Promise(function(resolve, reject) {
    var $afterTarget = $targets.filter('[data-animation-id=' + e + ']');
    $afterTarget.on('transitionend animationend', function() {
      resolve();
    });
  });
  promiseList.push(p);
});

// afterに設定されたアニメーションが全てresolveされ次第アニメーション起動
Promise.all(promiseList)
  .then(animate);

Promise を使用しているため IE11 が対象の場合は使用できないが、IE11 はブラウザではないので問題ない。

万が一 IE11 なんていう糞なやつに対応しなければならない場合は書き直す必要があるので注意。