前端修煉精神時光屋

Week8

Parallax Scrolling

huli

Demo

術業有專攻

困難點:細節

divide and conquer

把大問題切割成小問題 

  1. 沒有給圖片素材要怎麼辦?
  2. 要做比較複雜的動畫
  3. 要做 Parallax Scrolling

沒有給圖片素材怎麼辦?

用 CSS 自己畫!

要做複雜動畫怎麼辦?

CSS animation 可能不太好控制

直接找現成解決方案

GreenSock TweenMax

https://juejin.im/entry/591a600f128fe1005cdae46f
https://ihatetomatoes.net/wp-content/uploads/2015/08/GreenSock-Cheatsheet-2.pdf

Parallax Scrolling

找個適合自己的 library

ScrollMagic

Parallax Scrolling

By huli

Parallax Scrolling

  • 1,596