DESIGN STUDY · ANIMATION

Layers drift,
scroll bends them.
Depth emerges.

複数 SVG レイヤーの波が、スクロール「速度」に反応して跳ね上がる。そっと巻けば動かず、速く弾くとクレストが上端のキッカー付近まで届き、止めればふわっと下へ戻る。前景ほど大きく反応する。独立した横ドリフトも併走し、止まっていても海面のような微動を保つ。

SCROLL ↓

↑ FLICK FAST TO LAUNCH THE WAVES

速さに反応するアニメーション。

スクロール「速度」(px/frame) を speed 倍して各レイヤーに translateY を与える、それ以上のものは含まれない。 deadzone 以下のそっとした操作では動かず、速く弾いた量に比例して跳ね上がり、止めれば rest へ戻る。反応の差だけで「奥行き」が立ち上がるのは、人間が視差を距離として読むため。この最短経路を、外部依存ゼロで再現するのが本セルの目的。

使い方

— USAGE

3 ファイルをコピー

本ディレクトリの index.html / style.css / script.js を移植先にコピー。CSS と JS は外部依存ゼロ。

レイヤーを宣言

<div class="wp-layer" data-wave-speed="..." data-wave-amp="..." data-wave-color="..." ...> の data 属性で各レイヤーの挙動を制御。JS が SVG パスを生成する。

レイヤーの順序

マークアップで上に書いたレイヤーが背面、下に書いたものが前面。背面ほど speed を小さく、前面ほど大きくすると自然な視差になる。

レイヤーごとの data 属性

data-wave-speedスクロールへの追従倍率（0=固定、1=スクロール等速）0.15〜0.88

data-wave-amp波の振幅（px、viewBox 320 基準）18〜50

data-wave-base波の中心線 Y 座標（viewBox 上）180〜275

data-wave-segments波の山の数（多いほど密な波）3〜11

data-wave-colorレイヤーの塗り色#b9c8e8 ほか

data-wave-drift横ドリフト一周の時間（秒）14〜42

カスタマイズ可能な CSS 変数

--wp-heightヒーローセクションの高さ100vh

--wp-bg背景色（最背景レイヤーより奥）#f4f3ee

--wp-content-wテキスト最大幅1100px

Layers drift, scroll bends them. Depth emerges.