概要

CSSのscroll-timeline-nameプロパティは、スクロールイベントに連動したアニメーションを実装するために使用される新しいプロパティです。従来のアニメーションでは、時間経過に基づいて動きを制御していましたが、このプロパティではページのスクロール位置に応じて、要素が動いたり変化したりします。スクロールを利用した動的なインタラクションを提供するため、特にモダンなWebデザインやパララックス効果を実装する際に非常に有用です。

基本的な構文

selector {
    scroll-timeline-name: timeline-name;
}
  • timeline-nameは、事前に定義されたスクロールタイムラインの名前を指定します。これにより、アニメーションの進行がスクロールに基づいて制御されます。

scroll-timelineプロパティと組み合わせる

scroll-timeline-nameは単独で使用するものではなく、scroll-timelineという他のプロパティと組み合わせて使います。このプロパティでスクロールイベントのタイムラインを定義し、そのタイムラインに基づいてアニメーションを動かします。 以下は、scroll-timeline-nameの使用例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* スクロールタイムラインを定義 */
        @scroll-timeline my-scroll-timeline {
            source: auto;
            axis: block;
        }
        /* スクロールに基づいてアニメーションする要素 */
        .scroll-animated-element {
            scroll-timeline-name: my-scroll-timeline;
            animation: move 1s linear infinite;
        }
        /* アニメーションの内容 */
        @keyframes move {
            0% { transform: translateX(0); }
            100% { transform: translateX(100px); }
        }
    </style>
    <title>scroll-timeline-nameの例</title>
</head>
<body>
    <div class="scroll-animated-element">
        スクロールに連動する要素
    </div>
</body>
</html>

説明

この例では、@scroll-timelineでスクロールタイムラインを定義し、その名前をmy-scroll-timelineとしています。その後、.scroll-animated-elementクラスにscroll-timeline-nameを指定して、このタイムラインに基づくアニメーションを設定しています。@keyframesで定義されたアニメーションは、要素が100px移動する動きを示しており、これがスクロールに合わせて進行します。

スクロール軸の指定

scroll-timelineでは、スクロールの軸をaxisプロパティで指定できます。blockは垂直方向、inlineは水平方向のスクロールに対応します。

@scroll-timeline my-timeline {
    source: auto;
    axis: inline; /* 水平方向にスクロールした際にアニメーションを進行 */
}

応用例 - 複数のスクロール連動アニメーション

複数の要素が異なるスクロールタイムラインでアニメーションする場合もあります。以下は、その応用例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 1つ目のスクロールタイムライン */
        @scroll-timeline first-timeline {
            source: auto;
            axis: block;
        }
        /* 2つ目のスクロールタイムライン */
        @scroll-timeline second-timeline {
            source: auto;
            axis: block;
        }
        /* 1つ目の要素にタイムラインを適用 */
        .element1 {
            scroll-timeline-name: first-timeline;
            animation: fade-in 2s linear infinite;
        }
        /* 2つ目の要素に異なるタイムラインを適用 */
        .element2 {
            scroll-timeline-name: second-timeline;
            animation: slide 2s linear infinite;
        }
        /* アニメーション定義 */
        @keyframes fade-in {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
        @keyframes slide {
            0% { transform: translateY(0); }
            100% { transform: translateY(100px); }
        }
    </style>
    <title>複数のスクロールタイムラインの例</title>
</head>
<body>
    <div class="element1">
        1つ目の要素
    </div>
    <div class="element2">
        2つ目の要素
    </div>
</body>
</html>

説明

このコードでは、2つの異なるスクロールタイムライン（first-timelineとsecond-timeline）を作成し、それぞれ異なるアニメーションを実行しています。element1はフェードイン効果、element2は上下にスライドする動きをスクロールに連動して行います。これにより、ページのスクロールに応じて要素が別々に動くインタラクティブなデザインが可能です。

scroll-timeline-nameを使う際の注意点

ブラウザの対応状況

scroll-timeline-nameは比較的新しいCSSプロパティのため、まだすべてのブラウザで完全にサポートされていない可能性があります。主に最新の【Chrome】や【Edge】では動作しますが、【Firefox】や【Safari】では実装されていない場合があるため、対応状況を確認する必要があります。

パフォーマンスへの影響

スクロールに連動するアニメーションは、複雑なページではパフォーマンスに影響を与えることがあります。特に、多数の要素や大規模なアニメーションを同時に動かす場合、フレームレートが低下する可能性があるため、適切に最適化することが大切です。

まとめ

scroll-timeline-nameを使用すると、ユーザーのスクロールに連動したダイナミックなアニメーションを簡単に実装することができます。これにより、パララックス効果やスクロール連動のインタラクションを実現し、Webページに魅力的な動きを追加できます。ブラウザのサポート状況を確認しながら、適切なアニメーションを作成していきましょう。

参照:

`CSS` scroll-timeline-nameプロパティの詳細 | MDN