概要

view-timeline-axisは、CSSでスクロールアニメーションのタイムラインに使用するスクロール軸を制御するプロパティです。このプロパティを使うと、アニメーションがページの縦方向のスクロール（block）または横方向のスクロール（inline）に応じて発動するかを指定できます。view-timelineと組み合わせることで、ユーザーのスクロールに合わせたインタラクティブなアニメーションを実現できます。 このプロパティを活用することで、特定のスクロール軸に応じてアニメーションを最適化し、動的なWeb体験を提供します。

基本的な構文

selector {
    view-timeline-axis: value;
}
  • valueには、スクロールの方向（縦または横）に基づいた値を指定します。

主な値

  • block
    ブロック方向（通常は縦方向のスクロール）に基づいてタイムラインを制御します。
  • inline
    インライン方向（通常は横方向のスクロール）に基づいてタイムラインを制御します。
  • horizontal
    横スクロールを明示的に指定します（inlineと同義）。
  • vertical
    縦スクロールを明示的に指定します（blockと同義）。

例 - view-timeline-axisの基本的な使用

以下の例では、ページのスクロール軸に基づいてアニメーションを制御しています。view-timeline-axisを使い、縦スクロールと横スクロールに応じたアニメーションの違いを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            height: 200vh; /* 縦スクロール用の高さ */
            width: 300vw; /* 横スクロール用の幅 */
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            position: relative;
            animation: move 5s infinite;
        }
        .vertical-scroll {
            view-timeline: block;
            view-timeline-axis: block; /* 縦方向のスクロールをタイムラインに使用 */
        }
        .horizontal-scroll {
            view-timeline: inline;
            view-timeline-axis: inline; /* 横方向のスクロールをタイムラインに使用 */
        }
        @keyframes move {
            0% { transform: translate(0, 0); }
            100% { transform: translate(300px, 300px); }
        }
    </style>
    <title>view-timeline-axisの基本例</title>
</head>
<body>
    <div class="box vertical-scroll">縦スクロール</div>
    <div class="box horizontal-scroll">横スクロール</div>
</body>
</html>

説明

  • .vertical-scrollクラスでは、view-timeline-axis: blockが指定されており、縦方向のスクロールをタイムラインに使用しています。この要素は、ページを縦にスクロールするとアニメーションが進行します。
  • .horizontal-scrollクラスでは、view-timeline-axis: inlineを使って横スクロールに基づくアニメーションを設定しています。ページを横にスクロールすると、要素がアニメーションします。 この例により、view-timeline-axisを使って縦方向・横方向のスクロールアニメーションを簡単に制御できることがわかります。

view-timeline-axisの用途と効果

view-timeline-axisを使用することで、アニメーションが発動するスクロール軸を柔軟に設定できます。これにより、ページのレイアウトやコンテンツに応じたインタラクティブなアニメーションを提供でき、特定のセクションや要素に対して視覚的な強調を加えることができます。

主な効果

  • 縦スクロール連動アニメーション: view-timeline-axis: blockを使用して、縦スクロールに応じたアニメーションを作成できます。これは、ページが長く縦にスクロールする場合に適しています。
  • 横スクロール連動アニメーション: view-timeline-axis: inlineを使用することで、横スクロールに応じたアニメーションが可能です。横にスクロールするギャラリーやカルーセルの効果を強化するために使用できます。
  • 柔軟なレイアウト対応: ページの構造やユーザーインタラクションに基づいて、アニメーションの方向を柔軟にカスタマイズし、動的な体験を提供します。

view-timeline-axisと他のタイムラインプロパティの連携

view-timeline-axisは、view-timelineやscroll-timelineと組み合わせることで、アニメーションの動作をさらに詳細に制御できます。これにより、タイムラインの開始位置や進行方法をカスタマイズし、スクロールに応じた複雑なアニメーションを実現します。

例 - scroll-timelineとの連携

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            width: 300vw;
        }
        @scroll-timeline horizontal-timeline {
            source: auto;
            axis: inline; /* 横スクロールに基づいたタイムラインを設定 */
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: coral;
            animation: slide 2s infinite;
            scroll-timeline-name: horizontal-timeline;
            view-timeline-axis: inline;
        }
        @keyframes slide {
            0% { transform: translateX(0); }
            100% { transform: translateX(500px); }
        }
    </style>
    <title>scroll-timelineとview-timeline-axisの連携例</title>
</head>
<body>
    <div class="box">横スクロール</div>
</body>
</html>

説明

この例では、scroll-timelineとview-timeline-axisを連携させています。scroll-timelineで横スクロールに基づいたタイムラインを定義し、view-timeline-axis: inlineを使用して要素が横スクロールに応じて動作するように設定しています。

  • 横スクロールをトリガーとして、要素のアニメーションが進行します。
  • これにより、ページ全体のスクロールや特定のセクションに基づくダイナミックなアニメーションが可能になります。

view-timeline-axisを使う

際の注意点

  1. ブラウザのサポート状況
    view-timeline-axisはまだ新しいCSSプロパティであり、すべてのブラウザでサポートされているわけではありません。プロジェクトで使用する際には、ブラウザの対応状況を確認し、必要に応じてフォールバックのスタイルを用意することが重要です。
  2. パフォーマンスへの影響
    複雑なスクロールアニメーションや多くの要素に対してview-timeline-axisを適用すると、ページ全体のパフォーマンスに影響を与える可能性があります。スクロールイベントをトリガーにするアニメーションは頻繁に再描画されるため、デバイスやブラウザの負荷を考慮しながら適切に実装することが大切です。
  3. レイアウトとの調和
    view-timeline-axisを使用してスクロールアニメーションを追加する際には、ページ全体のレイアウトや他のコンテンツとの調和を考慮する必要があります。アニメーションがユーザー体験を損なわないように、適切なタイミングで表示されるように設計しましょう。

view-timeline-axisを使ったデザインの効果

view-timeline-axisは、スクロールに基づくアニメーションをコントロールするため、ユーザーがページを移動する際に視覚的な変化を提供し、ページのインタラクティブ性を向上させることができます。特に、ギャラリー、カルーセル、セクションごとのスクロールアニメーションに適しており、動的なデザインを簡単に作成できます。

まとめ

view-timeline-axisは、CSSでスクロールに基づくアニメーションのスクロール軸を制御する強力なプロパティです。縦方向（block）や横方向（inline）のスクロールに応じたアニメーションを簡単に作成でき、view-timelineやscroll-timelineとの組み合わせでさらに高度なアニメーション効果を実現できます。ブラウザ対応に注意しながら、ユーザー体験を向上させる動的なデザインを提供しましょう。

参照:

`CSS` view-timeline-axisプロパティの詳細 | MDN