scroll-progress-timeline

スクロール進捗タイムライン

順序のある情報をつなぐために、1 本の進捗ラインを使います。アニメーションを追加する前に、シーケンス全体が読みやすく、移動しやすい状態を保つ必要があります。

ステップをモデル化する

コンテンツはデータ駆動型にします。

const steps = [
  { id: "brief", number: "01", title: "Set the direction", body: "..." },
  { id: "build", number: "02", title: "Make the system", body: "..." },
  { id: "ship", number: "03", title: "Release and learn", body: "..." }
];

実際の見出しを含む順序付きリストとしてレンダリングします。ライン、ドット、メディア、アクティブ状態は、その構造を補強するものであり、置き換えるものではありません。

ラインを構築する

1. すべてのポイントの背後に、目立たないベースラインを描画します。
2. 垂直方向の場合は transform-origin: top、水平方向の場合は left を指定して、その上に進捗ラインを 1 本配置します。
3. 任意のセクションの端ではなく、最初と最後のポイントの中心を測定します。
4. それらの中心の間でスクロール位置を正規化します。
5. scaleY(progress) または scaleX(progress) を適用し、更新がコンポジター上で処理されるようにします。
6. 進捗の先端がポイントの中心を通過したら、そのステップをアクティブにします。

const progress = Math.min(1, Math.max(0,
  (viewportAnchor - lineStart) / (lineEnd - lineStart)
));
line.style.transform = `scaleY(${progress})`;

DOM への書き込みは、1 回のアニメーションフレーム内にスケジュールします。フォントや画像の読み込み後、サイズ変更時、向きの変更時、コンテンツの変更時にジオメトリを再計算します。

レイアウトを選択する

• 両側に十分な幅があり、コンテンツの比重が同程度の場合にのみ、中央揃えの交互配置タイムラインを使用します。
• 長文、コンパクトなステップ、高さの異なるカードが混在する場合は、左側のレールを使用します。
• 短いシーケンスと簡潔なラベルには、水平方向のラインを使用し、キーボード操作に対応したオーバーフローを明示します。
• 各ステップがそれぞれ異なるビジュアル状態を持つ場合にのみ、全画面固定のチャプターを使用します。固定表示の長さを制限し、次のセクションの前に解除します。
• 小さい画面では、シンプルな左側のレールに切り替えます。読書順を損なってまで交互配置を維持しないでください。

ステップの状態をアニメーションする

不透明度、移動、拡大縮小、ぼかし、色、メディアに、小さなトランジションを使用します。非アクティブな間も、すべてのステップを読み取れる状態に保ちます。現在の状態に意味がある場合にのみ、aria-current="step" でアクティブなインデックスを公開します。スクロールの更新をライブリージョンで毎回通知しないでください。

シンプルなアクティブ状態への切り替えには IntersectionObserver を使用します。ラインを連続的に伸ばしたり、固定表示のメディアと連携させたりする必要がある場合は、正規化されたスクロール計測または GSAP ScrollTrigger を使用します。

ナビゲーションを処理する

• ユーザーがプロセス内を移動できるようにする場合は、ステップのリンクに実際のアンカーを使用します。
• スティッキーヘッダーがある場合は、scroll-margin を追加します。
• フォーカスを維持し、パッシブなスクロール中にフォーカスを移動しないでください。
• ユーザーが明示的にステップを選択しない限り、URL とブラウザー履歴を安定した状態に保ちます。
• ステップがインタラクティブな場合は、視認できるフォーカス状態を持つボタンまたはリンクを使用します。装飾用のドットだけを唯一の操作手段にしないでください。

モーションを減らす

prefers-reduced-motion: reduce の場合、スクラブ補間、ぼかし、固定表示、大きな変形を使わず、ライン全体または到達した状態を個別に表示します。通常のドキュメントフローと、すべてのステップのコンテンツを維持します。

検証する

ステップ数の変動、カードの高さの不均一、メディアの欠落、長い翻訳文、390/768/1024/1440 の幅、200% のズーム、高速な順方向および逆方向のスクロール、アンカーへの直接移動、キーボード操作の順序、モーションの低減、フォントや画像の遅延読み込みによるレイアウト変化、ルートのクリーンアップ、コンソールエラーをテストします。どの境界でも、アクティブなステップとラインの先端が一致している必要があります。

作業用のリファレンスとして demo/index.html を使用し、再作成またはリミックスする場合は demo/PROMPT.md を使用します。REFERENCES.md は、リンクのみの実装ソースリストとして維持してください。