沿革ページのデモ

企業の沿革や、事業の歩みを見せるページ。

1. 01GSAP（ScrollTrigger・MotionPathPlugin・CustomEase）
2. 02SVGのパスの長さとスクロール量の対応づけ
3. 03IntersectionObserver

動きを減らす設定のとき

カードの動きを止めて、年表をそのまま表示します。

JSが動かないとき

年表のカードを、すべて表示した状態で並べます。

スクロール量をそのまま道の長さに比例させず、画面の真ん中と同じ高さに印が来るように対応づけました。カーブの多い所でも、読んでいる年と印の位置がずれにくくなります。道は年表の位置から引き直しているので、画面幅が変わっても印と年表がずれません。