MARK I
wireless speaker, designed to disappear. 下にスクロールすると、深度レイヤーが異速度で動き、製品が微回転しながらスペックが指し示される。長尺の product page で使う scrollytelling の実用例。
SCROLL ↓Listen everywhere.
ロングスクロールで「製品の存在」と「スペック」「素材」を物語として積み上げる。実装は data-speed（多層パララックス）と data-rotate-y/x・data-scale（要素の進捗追従）、data-from/to（注釈の出現範囲）だけ。
使い方
— USAGE↑ 想定：プロダクトの紹介・スペックページ／長尺ジャーナル／ブランドのオリジンストーリー。物理イラストではなく UI 要素（製品・スペック注釈・CTA） を多層パララックスに乗せるのが実用形。
01
2 ファイルをコピー
style.css / script.js を移植先へ。外部依存ゼロ。
02
data-speed / rotate / scale
任意の要素に data-speed（縦移動）、data-rotate-y・data-rotate-x（進捗で 0→指定度）、data-scale（進捗で +指定）を付ければ、JS が transform を 1 本にまとめて毎フレーム反映する。
03
注釈の出現範囲
.pa-annot[data-from][data-to] で進捗範囲を指定。製品の各部位を指すラインは CSS の ::before/::after で。
CSS 変数
--pa-sectionセクション全体の高さ（=スクロール量）400vh--pa-rangeレイヤー最大移動量の基準50vh