【Next.js】タイムラインセクションの作り方を解説

導入の流れや会社沿革を縦に見せるタイムラインは、4つまでが読めます。10年分の沿革を全部置くと、スクロールの途中で離脱します。

見た目は、左に線、右に見出しと1文、で足ります。年号を大きくしすぎると、本文が負けます。

動きは、各ステップが画面に入ったときの薄い入場だけです。線が描画される演出は、あっても1回です。

1つ目は、左右交互に置きすぎて、目線が往復することです。モバイルは必ず1列です。

2つ目は、1ステップに段落が3つあることです。1見出し＋1文。

3つ目は、線の色が本文より強いことです。線はガイドです。

各アイテムの左に border-l と丸い点を置きます。絶対配置の長い線は、高さ計算で壊れやすいです。

whileInView で一度だけ出します。全部同時に出ると、ただのリストです。delay は 0.08 秒ずつで足ります。

年号のタイポ、線のリズム、入場まで揃った塊は、border-l 連打では出ません。

DesignLayer でライブ確認してから載せてください。https://design-layer.com/components

ステップ名と期間だけ差し替えます。無料コピーは1日3回です。