常見
Parallax 視差
多層元素以不同 scrub 速度移動,做出深淺景深感。
導讀
同一捲動區間、不同位移量 = 景深。遠景動少、近景動多(或反向)即可。
- 看什麼
- BACK / MID / FRONT 相對速度不同,不是一起平移。
- 怎麼試
- 拉大 FRONT 的 |y|、縮小 BACK,視差會立刻變強。
Skill 對應:scrub + 不同 y 距離
- 遠景移動少、近景移動多(或反向)即可做出景深
- 一律用 transform(y / yPercent),不要動 top/margin
- 用 GUI 調三層 y 距離,即時感受視差強弱
gsap.to(".back", { y: 80, scrub: true });
gsap.to(".mid", { y: -40, scrub: true });
gsap.to(".front", { y: -120, scrub: true });BACK
MID
FRONT