概要

scroll-timelineプロパティは、CSSでスクロール位置に基づいたアニメーションを制御するためのタイムラインを設定するプロパティです。このプロパティを使用することで、ユーザーのスクロールに応じてアニメーションが進行する動的なエフェクトを簡単に実現できます。スクロールに合わせてアニメーションが進むため、ユーザーにインタラクティブで視覚的な体験を提供できます。

構文

scroll-timeline: <timeline-name> <scroll-source> <axis>;

パラメータ

  • <timeline-name>
    タイムラインの名前を指定します。アニメーションとタイムラインを関連付けるために使用されます。
  • <scroll-source>
    スクロールの基準となる要素を指定します。スクロール位置の参照元を定義します。
  • <axis>
    スクロールの方向を指定します。縦方向はblock、横方向はinlineを指定します。

例

scroll-timeline: my-timeline auto block;

この例では、スクロール位置に応じて縦方向のスクロールタイムラインが設定されます。

戻り値

scroll-timelineは、スクロールに基づいたタイムラインを設定し、アニメーションがそのタイムラインに従って進行します。これにより、ユーザーがスクロールするとアニメーションが動的に反応し、ページ全体がインタラクティブに演出されます。

説明

scroll-timelineは、通常のアニメーションの進行を時間ではなくスクロール位置に同期させることで、スクロールの進行に合わせてアニメーションを制御できる革新的なCSSプロパティです。これにより、スクロールに連動するパララックス効果や進行に応じたアニメーションの実装が容易になります。

主な特徴

  • スクロールに基づいたアニメーション制御: ユーザーのスクロール位置を基準にしてアニメーションが進行するため、動きの制御が自然に行えます。
  • インタラクティブなデザイン: スクロールに反応するアニメーションで、ユーザーの操作に応じた動的な体験を提供できます。
  • タイムラインの柔軟な設定: アニメーションとスクロールタイムラインを柔軟に関連付けることができ、複数のタイムラインを使い分けて高度な演出も可能です。

使用例

基本的な使用例 - スクロールに合わせてフェードイン

以下の例では、scroll-timelineを使ってスクロールに応じて要素がフェードインするアニメーションを実装しています。

/* タイムラインの設定 */
@scroll-timeline my-timeline {
  source: auto; /* 自動的にスクロール要素を選択 */
  axis: block; /* 縦方向にスクロール */
}
/* アニメーションの設定 */
.fade-in {
  animation: fadeIn 1s both;
  animation-timeline: my-timeline; /* タイムラインとアニメーションを関連付け */
}
/* フェードインのアニメーションキーフレーム */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

この設定により、ユーザーがスクロールすることで要素がフェードインして表示されます。

横方向のスクロールアニメーションを設定する例

横方向のスクロールに応じて、要素が左右に動くアニメーションを設定します。

/* 横方向スクロールタイムラインの設定 */
@scroll-timeline slide-timeline {
  source: auto;
  axis: inline; /* 横方向にスクロール */
}
/* スクロールに連動したアニメーションの設定 */
.slide-left {
  animation: slideIn 1s both;
  animation-timeline: slide-timeline; /* 横スクロールタイムラインを適用 */
}
/* スライドインのアニメーションキーフレーム */
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

この例では、横方向のスクロールに応じて要素が左からスライドインするアニメーションが実現されます。

複数の要素に異なるスクロールタイムラインを適用する例

スクロールタイムラインを複数設定し、異なる要素に対して異なるタイムラインでアニメーションを制御します。

/* 1つ目のタイムライン */
@scroll-timeline fade-timeline {
  source: auto;
  axis: block;
}
/* 2つ目のタイムライン */
@scroll-timeline scale-timeline {
  source: auto;
  axis: block;
}
/* フェードイン用のアニメーション */
.fade-in {
  animation: fadeIn 1s both;
  animation-timeline: fade-timeline;
}
/* 拡大縮小用のアニメーション */
.scale-up {
  animation: scaleUp 1s both;
  animation-timeline: scale-timeline;
}
/* 拡大アニメーションキーフレーム */
@keyframes scaleUp {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

この設定では、複数のタイムラインを利用して、スクロールに合わせて異なるアニメーションが発生します。

注意点

  • scroll-timelineは、スクロール位置に基づいてアニメーションを制御するため、ページのレイアウトやスクロール位置の変化に影響されやすいです。設計時にレイアウトの整合性を確認する必要があります。
  • 対応しているブラウザが限られているため、使用する際はブラウザのサポート状況を確認してください。最新のブラウザであれば対応している場合が多いですが、古いバージョンでは機能しないことがあります。
  • スクロールが主導するため、意図しないアニメーションの動きが発生する場合もあるため、デバッグや動作確認を慎重に行うことが推奨されます。

まとめ

scroll-timelineプロパティは、スクロール位置を基準にアニメーションを制御できる革新的なCSSプロパティです。ユーザーのスクロールに反応するインタラクティブなアニメーションを簡単に実装でき、視覚的な演出を向上させます。特に、ページ全体のアニメーション効果をスクロールに連動させたい場合に最適なプロパティです。

参照:

scroll-timeline - MDN Web Docs