1. 喵~
喵~
NKO4
視差滾動經驗分享

2. I am Blue
陳柏穎
poying
Ying Chen
Po-
?
?
Sean
！
⾐衣夫⼈人
記得來參
aws
加

3. TOUCH
Po-Ying Chen
NodeJS, Landing Page
Justin Liu
Chrome E
YOUR
HEART
Gale Yang
Blue Chen
Cat, Landing Page
Promotional video

4. ㄟㄟ
我們來作⼀一個視差滾動
的宣傳⾴頁啦 !
有⼈人有作過嗎？

5. 沒......

6. 是個好的開始！ ?

7. 48hr Hackathon
+
⼈人⽣生第⼀一次視差滾動

8. GG

9. - 無 Library 想感受⼀一下最真實的視差滾動
懶得看 Doc

10. sections.js
http://goo.gl/Dv79sB

11. sitename
window height
section 1
section 2
我們看到的範圍

12. sitename
section 1
離開 s1 50%, 進⼊入 s2 50%
section 2

13. 我們需要處理的問題
•
onScroll ?
•
Transition
•
CSS prefix 問題

14. onScroll 很頓ㄟ

15. requestAnimationFrame！

16. 不能⽤用 setTimeout 嗎？

17. 看這裡看這裡！
http://goo.gl/aQzlJq
Paul Irish
MDN

18. by David B. Gleason

19. 那 Transition 勒？

20. 我可以直接這樣
設 Style 嗎？

21. el.style.top = ‘10px’

22. 看看這張圖吧！

24. 讚！
by 臺⼤大⿊黑客松 - HackNTU

25. 那是不是要規劃怎麼
設定樣式了？

26. 沒錯！
我們看下去吧！

27. sitename
section 1
離開 s1 50%, 進⼊入 s2 50%
section 2

28. 瀏覽進度需要準確到 px ?

29. 常常需要
讓 區 塊 ⾼高 度 跟 可 視 區 域 ⼀一 樣 ⾼高

30. 就是這樣！
by 徐敏倚

31. 也不想讓 HTML 塞⼤大堆東⻄西 ~
data-200-start=“……”
data-300-end=“……”

32. 純病態 ><

35. 等等
那 vendor prefixes 勒？

36. 重複寫同樣東⻄西
很像傻逼耶

37. ⿊黑啊
我們來偵測 prefix 吧！

38. getComputedStyle！

39. 那是什麼神⾺馬玩意！

40. 取得最終樣式！
還包含瀏覽器預設樣式！

41. 這…
跟我們現在要做的是有關？

42. 在 css 的 key 裡
我們可以取得 prefix 啊！

43. // 取得 CSSStyleDeclaration
var style = window.getComputedStyle(document.documentElement);
// 借⽤用 Array 的 join ⽅方法把 CSSStyleDeclaration 變成只有 css key 的字串
var match = Array.prototype.join.call(style, '').match(/-(?:o|moz|webkit|ms)-/i);
// 把 prefix 揪出來
var prefix = match && match[0];

44. 宇庭太棒了！
by 徐敏倚

45. by I'll Never Grow Up

46. 結束！