概要

scroll-timeline-axisプロパティは、CSSでスクロールタイムラインの軸を設定するためのプロパティです。このプロパティを使用することで、スクロールアニメーションの進行方向を縦方向（ブロック軸）、横方向（インライン軸）、または両方向に設定でき、スクロールに合わせたアニメーション効果を詳細にコントロールすることが可能になります。

構文

scroll-timeline-axis: block | inline | both;

パラメータ

• block
  スクロールタイムラインをブロック軸（縦方向）に設定します。通常の縦スクロール（上から下）に基づいてアニメーションが進行します。
• inline
  スクロールタイムラインをインライン軸（横方向）に設定します。横方向のスクロール（左から右、または右から左）に基づいてアニメーションが進行します。
• both
  ブロック軸とインライン軸の両方向のスクロールに基づいてアニメーションを進行させます。どちらの方向のスクロールにも反応する設定です。

戻り値

scroll-timeline-axisは、指定された軸に基づいてスクロールタイムラインの進行を制御します。これにより、アニメーションがユーザーのスクロールに応じて反応する方向が決定され、デザインの意図に合わせたスクロール演出が可能になります。

説明

scroll-timeline-axisは、scroll-timelineと連携して、どの方向のスクロールに対してタイムラインが進行するかを指定するプロパティです。通常のスクロールアニメーションでは、縦方向（ブロック軸）が一般的ですが、横スクロールを用いたデザインや、縦横の両方向に反応する複雑なアニメーションを実装したい場合にこのプロパティが役立ちます。

主な特徴

• 縦方向、横方向、または両方向のスクロールに基づいてアニメーションの進行を制御できます。
• スクロールの方向に応じたインタラクティブなアニメーションを簡単に作成可能です。
• scroll-timelineと組み合わせて使用することで、タイムラインをユーザーの操作に応じた動的な演出に変えることができます。

使用例

基本的な使用例 - 縦方向のスクロールタイムラインを設定

以下の例では、scroll-timeline-axisをblockに設定し、縦方向のスクロールに反応するアニメーションを作成しています。

/* スクロールタイムラインの設定 */
@scroll-timeline vertical-timeline {
  source: auto;
  axis: block; /* 縦方向にスクロール */
}
/* アニメーションの設定 */
.scroll-fade {
  animation: fadeIn 1s both;
  animation-timeline: vertical-timeline; /* 縦スクロールタイムラインを適用 */
}
/* フェードインのアニメーションキーフレーム */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

横方向のスクロールに基づいたアニメーションの例

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

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

この例では、ユーザーが横にスクロールすることで、要素が右からスライドインします。

縦横両方向に反応するスクロールタイムラインの例

スクロールタイムラインをbothに設定し、縦横の両方向のスクロールに応じてアニメーションが進行します。

/* 縦横両方向スクロールタイムラインの設定 */
@scroll-timeline both-directions-timeline {
  source: auto;
  axis: both; /* 縦横両方のスクロールに反応 */
}
/* アニメーションの設定 */
.move-scale {
  animation: scaleUp 1s both;
  animation-timeline: both-directions-timeline; /* 縦横両方向タイムラインを適用 */
}
/* 拡大アニメーションキーフレーム */
@keyframes scaleUp {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

この設定では、縦横いずれの方向でもスクロールすると、要素が拡大するアニメーションが動作します。

注意点

• scroll-timeline-axisは、scroll-timelineと一緒に使うことで機能します。単独での使用は意味を持たないため、設定時にはタイムラインと合わせて設定する必要があります。
• 対応ブラウザが限られている場合があるため、使用前にブラウザのサポート状況を確認してください。最新のブラウザでは比較的サポートされていますが、古いバージョンや一部の環境では機能しないことがあります。
• 複数の方向にスクロールが発生するレイアウトでは、意図しないアニメーションの挙動が発生することがあるため、実装時に動作確認を十分に行うことが推奨されます。

まとめ

scroll-timeline-axisプロパティは、スクロールに応じたアニメーションを縦方向や横方向、または両方向に制御できる柔軟なCSSプロパティです。スクロールに連動するアニメーションの進行方向を自由に設定できるため、よりインタラクティブで動的なデザインを実現できます。特に、縦横スクロールを組み合わせた複雑なウェブページのアニメーションに最適です。