Webデザインをレベルアップ！CSS scroll-timelineで実現する、驚きのアニメーション例

scroll-timelineの仕組みは、以下の3つの要素で構成されています。

スクロールタイムラインの定義: scroll-timelineプロパティを使用して、スクロール可能な要素とアニメーションに使用するタイムラインの名前を定義します。
アニメーションの定義: @keyframesルールでアニメーションの動きを定義します。
要素へのアニメーション適用: animation-timelineプロパティを使用して、アニメーションを適用する要素と、使用するスクロールタイムラインを指定します。

scroll-timelineの利点は以下の通りです。

パフォーマンスの向上: JavaScriptを使用するアニメーションに比べて、パフォーマンスが向上する可能性があります。
コードの簡素化: JavaScriptを使用せずに、CSSのみでアニメーションを作成することができます。
直感的なアニメーション: スクロール量と連動してアニメーションが進行するため、ユーザーの操作とアニメーションが自然に連動します。

scroll-timelineの例：

以下のコードは、ページをスクロールすると、赤いボックスが上下にアニメーションする例です。

/* スクロールタイムラインの定義 */
.container {
  scroll-timeline: my-timeline;
}

/* アニメーションの定義 */
@keyframes move-up-down {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(20px);
  }
}

/* 要素へのアニメーション適用 */
.box {
  animation: move-up-down 2s infinite alternate;
  animation-timeline: my-timeline;
}

この例では、.container要素がスクロール可能な要素として定義され、my-timelineという名前のスクロールタイムラインが使用されます。.box要素には、move-up-downという名前のアニメーションが適用され、このアニメーションはmy-timelineによってスクロール量と連動して制御されます。

基本的な例：赤いボックスを上下にアニメーション

この例は、ページをスクロールすると、赤いボックスが上下にアニメーションするものです。

/* スクロールタイムラインの定義 */
.container {
  scroll-timeline: my-timeline;
}

/* アニメーションの定義 */
@keyframes move-up-down {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(20px);
  }
}

/* 要素へのアニメーション適用 */
.box {
  background-color: red;
  width: 50px;
  height: 50px;
  margin: 50px auto;
  animation: move-up-down 2s infinite alternate;
  animation-timeline: my-timeline;
}

スクロール位置に応じてアニメーションの速度を変更

この例は、スクロール位置に応じて、赤いボックスが上下にアニメーションする速度を変更するものです。スクロールが速いほど、アニメーションの速度も速くなります。

/* スクロールタイムラインの定義 */
.container {
  scroll-timeline: my-timeline;
}

/* アニメーションの定義 */
@keyframes move-up-down {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(20px);
  }
}

/* 要素へのアニメーション適用 */
.box {
  background-color: red;
  width: 50px;
  height: 50px;
  margin: 50px auto;
  animation: move-up-down 2s linear forwards;
  animation-timeline: my-timeline;
}

/* アニメーション速度をスクロール位置に応じて変更 */
.container {
  scroll-timeline-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
}

複数の要素をアニメーション

この例は、3つの段落をスクロール位置に応じて、それぞれ異なるアニメーションでアニメーションさせます。

/* スクロールタイムラインの定義 */
.container {
  scroll-timeline: my-timeline;
}

/* アニメーションの定義 */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-in-left {
  from {
    transform: translateX(-100px);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    transform: translateX(100px);
  }
  to {
    transform: translateX(0);
  }
}

/* 要素へのアニメーション適用 */
.paragraph1 {
  animation: fade-in 1s ease-in-out 0.2s forwards;
  animation-timeline: my-timeline;
}

.paragraph2 {
  animation: slide-in-left 1s ease-in-out 0.4s forwards;
  animation-timeline: my-timeline;
}

.paragraph3 {
  animation: slide-in-right 1s ease-in-out 0.6s forwards;
  animation-timeline: my-timeline;
}

そのような場合、scroll-timelineの代替方法として以下の方法が考えられます。

JavaScriptを使用する

JavaScriptを使用して、スクロール位置を監視し、それに応じて要素をアニメーションさせることができます。この方法は、scroll-timelineよりも柔軟性が高く、複雑なアニメーションを作成することができます。

CSSアニメーションと「animation-delay」を使用する

animation-delayプロパティを使用して、アニメーションの開始タイミングをスクロール位置に応じて遅らせることができます。この方法は、scroll-timelineほど強力ではありませんが、シンプルなアニメーションであれば十分に使用できます。

ライブラリを使用する

スクロールと連動したアニメーションを作成するためのライブラリがいくつかあります。これらのライブラリは、scroll-timelineよりも使いやすく、複雑なアニメーションを作成することができます。

代表的なライブラリ

それぞれの代替方法の利点と欠点

方法	利点	欠点
JavaScriptを使用する	柔軟性が高い	複雑
CSSアニメーションと「animation-delay」を使用する	シンプル	機能が限られている
ライブラリを使用する	使いやすい	ライブラリに依存する必要がある

scroll-timelineの代替方法を選択する際には、以下の点を考慮する必要があります。

開発者のスキル
ブラウザサポート
作成したいアニメーションの複雑性