スクロール連動アニメーションの作り方：CSS vs JavaScript

CSS スクロールタイムライン：スクロール連動アニメーションを簡単実装

概要

• 動作環境: 主要なブラウザでサポートされています。
• 利点:
  • コード量が少なく、記述がシンプル
  • スクロール量とアニメーションを直接結びつけ、直感的に操作可能
  • 高度なアニメーションも容易に実現
• 欠点:

主な機能

• スクロール位置とアニメーションの連動:
  • スクロールに応じて、要素の表示・非表示、位置、色、形状などの変化をアニメーションさせる
  • 複数のアニメーションを同時に実行し、複雑な動きを表現
• アニメーションのタイミング制御:
  • スクロール開始時、終了時、特定の位置でのみアニメーションを実行
  • アニメーションの速度やイージングを調整
• 複数タイムラインの管理:
  • 複数のスクロールタイムラインを定義し、個別にアニメーションを制御
  • タイムラインを組み合わせることで、より複雑なアニメーションを実現

基本的な使い方

1. @scroll-timeline ルールでタイムラインを定義
   • タイムラインの名前と、スクロール方向（縦 or 横）を指定
2. scroll-timeline プロパティでアニメーション対象を指定
   • タイムラインの名前と、アニメーションの開始位置・終了位置を指定
3. アニメーションプロパティで具体的な動きを定義
   • opacity、transform、background-color など、アニメーションさせるプロパティと変化量を指定

• スクロールタイムラインは、視覚的な訴求力向上、ユーザーエンゲージメント向上、操作性向上などに役立ちます。
• 実装例やチュートリアルが多数公開されているので、参考にしながら学習を進めると効果的です。

CSS スクロールタイムラインは、スクロール連動アニメーションを簡単に実装できる便利な機能です。コード量が少なく、直感的に操作できるため、初心者にもおすすめです。

スクロールタイムライン サンプルコード

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

@scroll-timeline {
  name: "my-timeline";
}

.box {
  scroll-timeline: my-timeline;
  scroll-timeline-position: 0% 100%;
  
  animation: fade-in 2s ease-in-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

解説:

• .box要素は、スクロール開始時に透明で、スクロール完了時に完全に表示されます。
• アニメーションは fade-in キーフレームで定義されています。

スクロール位置に応じて要素の大きさを変化

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

@scroll-timeline {
  name: "my-timeline";
}

.box {
  scroll-timeline: my-timeline;
  scroll-timeline-position: 0% 100%;
  
  animation: grow 2s ease-in-out;
}

@keyframes grow {
  from {
    width: 50px;
    height: 50px;
  }
  to {
    width: 200px;
    height: 200px;
  }
}

解説:

• .box要素は、スクロール開始時に50px x 50pxで、スクロール完了時に200px x 200pxに拡大されます。
• アニメーションは grow キーフレームで定義されています。

スクロールに応じて要素の色を変更

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
}

@scroll-timeline {
  name: "my-timeline";
}

.box {
  scroll-timeline: my-timeline;
  scroll-timeline-position: 0% 100%;
  
  animation: color-change 2s ease-in-out;
}

@keyframes color-change {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
  }
}

解説:

• .box要素は、スクロール開始時に赤色で、スクロール完了時に青色になります。
• アニメーションは color-change キーフレームで定義されています。

複数のアニメーションを組み合わせる

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

@scroll-timeline {
  name: "my-timeline";
}

.box {
  scroll-timeline: my-timeline;
  scroll-timeline-position: 0% 100%;
  
  animation: fade-in 2s ease-in-out, grow 2s ease-in-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes grow {
  from {
    width: 50px;
    height: 50px;
  }
  to {
    width: 200px;
    height: 200px;
  }
}

解説:

• fade-in と grow アニメーションが同時に実行されます。

スクロール位置に応じて要素を移動

<div class="box"></div>

.box {
  width: 100px;

CSS スクロールタイムラインの代替方法

そこで、CSS スクロールタイムラインの代替方法として、以下の3つの方法を紹介します。

JavaScriptを使用する

従来の方法として、JavaScriptを使用してスクロール位置を取得し、それに応じてアニメーションを制御する方法があります。

メリット:

• すべてのブラウザで動作する
• 高度なアニメーションを実現できる

デメリット:

• コード量が多くなる
• スクロールイベントの処理など、複雑な処理が必要

ライブラリを使用する

スクロールアニメーションを簡単に実装できるライブラリが多数公開されています。

メリット:

• コード量が少なく、簡単に実装できる
• さまざまなアニメーション効果が用意されている

デメリット:

• ライブラリの追加読み込みが必要
• ライブラリに依存するため、自由度が低くなる

CSS変数とアニメーションタイミング関数を使用する

CSS変数と animation-timing-function を使用して、スクロール位置に応じて要素のスタイルを変化させる方法があります。

メリット:

• コード量が比較的少ない
• スクロールタイムラインよりも軽量

デメリット:

• スクロールタイムラインほど機能が豊富ではない
• 複雑なアニメーションには不向き

CSS スクロールタイムラインは、スクロール連動アニメーションを簡単に実装できる便利な機能ですが、ブラウザのサポート状況によっては代替方法が必要になります。

上記で紹介した3つの方法はそれぞれメリットとデメリットがあるので、目的に合った方法を選択することが重要です。