スクロールの深さがそのまま再生位置になります。
ゆっくり・逆方向、すべて手の中でコントロールできます。
SCENE 01 — DECOMPOSE
SCENE 02 — TYPOGRAPHY
1文字ずつが独立してスクロールに反応しています
SCENE 03 — RECOMPOSE
時間で流れるアニメーションではなく、スクロール位置をそのまま進行度に変換する「スクラブ」方式。 写真は約400枚のタイルに切り分けられ、1枚ずつ違う方向・回転・タイミングで飛んでいきます。
position: sticky で画面を固定し、その間のスクロール量を0〜1の進行度に変換。タイルごとに乱数の飛散方向・回転・遅延を持たせ、進行度に応じてCanvasに描画し直しています。シーン1は右下のボタンで分解パターン(タイル/たんざく/こまかく)を切り替えられます。
ブランドストーリーや事例紹介など「読み進めてほしい」ページに。ユーザーが自分のペースで動きを操れるため、動画と違って押しつけがましくならないのが利点です。
Canvas 2D + IntersectionObserver。画面外のシーンは描画を止めて負荷を抑えています。文字の分解はDOMのまま1文字ずつtransformしているので、コピペで文言変更も簡単。