格子の奥に、
暮らしがある

このページで使っている実装

スクロール連動パララックス

ヒーローの5層を requestAnimationFrame で速度差をつけて動かしています。スクロールイベントで直接DOMを触らず、描画フレームに同期させています。

間取り図の線画アニメーション

SVGの stroke-dashoffset を使い、画面に入った物件から順に間取りが描かれます。図はデータから生成しているため、物件を足せば図も増えます。

IntersectionObserver

表示領域に入った要素だけをアニメーションさせ、画面外では動かしません。物件が増えても描画コストが上がりません。

動きを止める設定への対応

prefers-reduced-motion を検出し、動きを苦手とする閲覧者にはすべての動きを止めた状態で表示します。