SCENE 02 — SPEED DIFFERENCE
速度差だけで生まれる奥行き
3つの列がそれぞれ違う速さでスクロールに反応します。中央だけ逆方向。
文字は「山の奥・霧の手前」にいます
3つの列がそれぞれ違う速さでスクロールに反応します。中央だけ逆方向。
スクロールでクリップ領域(clip-path)を広げています
パララックスの本質は、手前のものほど大きく動くという遠近法の再現です。 このページではスクロール・マウス・クリップの3種類の「ずれ」を組み合わせています。
各層に「マウス係数」と「スクロール係数」を持たせ、1つのループでまとめて transform を更新。動きには慣性(lerp)をかけて、層ごとの追従速度の違いも奥行き感に利用しています。
ブランドサイトのFV、コンセプトページ、採用サイトに。特に「文字を写真の層の間に挟む」構図は、平面のバナーでは絶対に出せない世界観がつくれます。
transformとclip-pathのみを動かしているのでGPU描画で軽量。スマホではマウスの代わりにスクロール分だけが効きます。層の重なり順(z-index)の設計が仕上がりの9割です。