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

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

Yuriko Hirota

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

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

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

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

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

このたび、スクロールドリブンアニメーションをサポートする新しい API セットが導入されました。この 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 のメリットは 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 と連携して、宣言型のスクロールドリブンアニメーションを可能にします。

その他のデモとリソース

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

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

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

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

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

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

その他のデモとリソース

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

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

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

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