サイズの違う画像が、奥行きをつけて流れていくパララックス
要点
- 画像を大・中・小に分け、流れる量を変えて奥行きを出す
- ページ全体を ScrollSmoother でなめらかにし、文字は pin で貼りつける
- 流れはスクロールに直結、拡大縮小は少し遅れて追わせる
仕組み
- 3 つの速さ：大はページと同じ速さ（手前）。中は画面の高さの 15%、小は 25% だけ遅れて動きます（奥）。画面に入ってから出るまでの進み具合（0〜1）で、上下にずらします。
- 枠の外へ動かす：画像を枠の中で動かさず、画像ごと枠の外へずらします。はみ出しは、全体を包む入れ物で切ります。
- 奥ほど薄く：小さい画像の一部を、最初から薄く（opacity 0.2〜0.4）置きます。
- 文字は、貼りつける：ScrollTrigger の
pin を使います。なめらかスクロールは中身を動かす仕組みで、sticky が効かないためです。画像の上でも読めるよう、mix-blend-mode: difference をかけます。
- マウスにも遅れて追わせる：大 60px・中 30px・小 20px、マウスと逆向きに動かします。
流れの部分
// 流れる量：大きさごとに決める（画面の高さに対する割合）
var range = { small: 0.25, medium: 0.15, large: 0 };
// 画像が画面に入ってから出ていくまで、-x から +x まで、スクロールにそのまま結びつけて動かす
var x = range * innerHeight;
gsap.fromTo(move, { y: -x }, {
y: x,
ease: "none",
scrollTrigger: {
trigger: item,
start: "top-=" + x + " bottom", // 画面の下に入る少し前から
end: "bottom+=" + x + " top", // 画面の上から出たあとまで
scrub: true
}
});
なめらかさ
- ページ全体に ScrollSmoother（
smooth: 1.2）。本物のスクロールは残るので、スクロールバーもキーボードも使えます。
- 流れは
scrub: true、拡大縮小と入場は scrub: 0.4。速さの違う動きが重なり、ゆったり見えます。
- ヒーローと終わりのブロックは「遅れ」で動かします。
data-speed と data-lag で、画像の流れと動きの質をそろえます。
- ScrollSmoother を、先に作ります。ScrollTrigger より後だと、貼りつく位置がずれます。
こだわり・気をつけたこと
- 動きを減らす設定には、なめらかスクロール・流れ・拡大縮小を省きます。文字は CSS の sticky、画像は表示したままです。
- GSAP が読み込めなくても、動きなしで全体を表示します。CDN から読み込み、バージョンは 3.13.0 に固定しています。
- マウスの追従は、マウスのある環境だけです。タッチ操作は標準のスクロールのままです（遅れて付いてくると重く感じるため）。
- スマホは、列が 12 から 6 に減るので、一部の画像を隠して並べ直します。
- 画面の下の写真は、あとから読み込みます。WebP にして、小さい画面には小さいファイルを使います。
- 飾りの画像は、読み上げの対象から外します。
写真は Unsplash の無料の写真です（Amanda Marie、Dhruv、Juliana Tanchak、Martin Martz、Naksha Banwao、Todd Trapani、Waro Photos。撮影者の皆さまに、感謝いたします）。GSAP（ScrollTrigger・ScrollSmoother）と英字フォントを、外部から読み込んでいます。
