このページは Cloud Translation API によって翻訳されました。

スクロールドリブンアニメーションのパフォーマンスに関する事例紹介

Yuriko Hirota

スクロールドリブンアニメーションの新機能

スクロールドリブンアニメーションは、ユーザーのスクロール位置によってトリガーされる、ウェブサイトやウェブアプリにインタラクティビティと視覚的な魅力を持たせる方法です。これは、ユーザーのエンゲージメントを維持し、ウェブサイトの視覚的な魅力を高める優れた方法です。

以前は、スクロールドリブンアニメーションを作成する唯一の方法は、メインスレッドのスクロールイベントに応答することでした。これにより、次の 2 つの大きな問題が生じました。

スクロールは別のスレッドで行われるため、スクロールイベントは非同期的に配信されます。
メインスレッドのアニメーションはジャンクが発生する可能性があります。

そのため、スクロールと同期して高パフォーマンスのスクロールドリブンアニメーションを作成することは不可能、または非常に困難になります。

このたび、スクロールドリブンアニメーションをサポートする新しい API セットが導入され、CSS または JavaScript から使用できるようになります。この API は、使用するメインスレッドリソースをできるだけ少なくしようとします。これにより、スクロールドリブンアニメーションの実装がはるかに容易になり、さらに滑らかなものになります。スクロールドリブンアニメーション API は現在、次のブラウザでサポートされています。

対応ブラウザ

ソース

この記事では、この新しいアプローチと従来の JavaScript の手法を比較し、新しい API によってスクロールドリブンのアニメーションがいかに簡単で滑らかであるかを説明します。

スクロールドリブンアニメーション CSS API と従来の JavaScript

次の例の進行状況バーは、クラス JavaScript 手法を使用して作成されています。

ドキュメントは、scroll イベントが発生するたびに応答し、ユーザーがスクロールした scrollHeight の割合を計算します。

document.addEventListener("scroll", () => {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

次のデモは、CSS で新しい API を使用した同じ進行状況バーを示しています。

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

新しい CSS 機能の animation-timeline は、スクロール範囲内の位置を進行状況の割合に変換するため、面倒な処理をすべて行います。

興味深いのは、両方のバージョンのウェブサイトに、メインスレッドのリソースのほとんどを消費する非常に負荷の高い計算を実装したとします。

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

ご想像のとおり、従来の JavaScript バージョンは、メインスレッドのリソースジャンクションが原因で、動作がぎこちなく動作が遅くなります。その一方で、CSS の場合、負荷のかかる JavaScript 処理の影響は受けず、ユーザーのスクロール操作にも応答できます。

次のスクリーンショットに示すように、DevTools では CPU 使用量がまったく異なります。

メインスレッドの比較。

次のデモは、CyberAgent で作成したスクロールドリブンアニメーションの応用例です。スクロールすると写真がフェードインします。

新しいスクロールドリブンアニメーション JavaScript API と従来の JavaScript API の比較

新しい API のメリットは CSS だけに限りません。JavaScript を使用して、滑らかなスクロールドリブンアニメーションを作成することもできます。次の例をご覧ください。

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

これにより、JavaScript のみを使用して、前の CSS デモで示した進行状況バーのアニメーションを作成できます。基盤となるテクノロジーは CSS バージョンと同じです。この API は、メインスレッドのリソースをできるだけ少なく使用しようとするため、従来の JavaScript アプローチと比較してアニメーションが大幅にスムーズになります。

また、この新しい API は既存の Web Animations API（WAAPI）および CSS Animations API と連携して、宣言型のスクロールドリブンアニメーションを可能にします。

Codepen の web-dot-dev による Pen ZENzLZd をご覧ください。

その他のデモとリソース

こちらのデモサイトで、スクロールドリブンアニメーションのさまざまな実装を確認できます。ここでは、CSS と JavaScript からこれらの新しい API を使用したデモを比較できます。

新しいスクロールドリブンアニメーションについて詳しくは、こちらの記事と I/O 2023 のトークをご覧ください。

スクロールドリブン アニメーションのパフォーマンスに関する事例紹介

スクロールドリブン アニメーションの新機能

スクロールドリブン アニメーション CSS API と従来の JavaScript

新しいスクロールドリブン アニメーション JavaScript API と従来の JavaScript API の比較

その他のデモとリソース

スクロールドリブンアニメーションのパフォーマンスに関する事例紹介

スクロールドリブンアニメーションの新機能

スクロールドリブンアニメーション CSS API と従来の JavaScript

新しいスクロールドリブンアニメーション JavaScript API と従来の JavaScript API の比較