常見

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 });
觀察三層不同速度
parallax layers
BACK
MID
FRONT
結束區