喵~

喵~

NKO4

視差滾動經驗分享
I am Blue

陳柏穎
poying
Ying Chen
Po-

?
?

Sean

!
⾐衣夫⼈人

記得來參

aws

加
TOUCH

Po-Ying Chen
NodeJS, Landing Page

Justin Liu
Chrome E

YOUR

HEART

Gale Yang

Blue Chen

Cat, Landing Page

Promo...
ㄟㄟ
我們來作⼀一個視差滾動
的宣傳⾴頁啦 !

有⼈人有作過嗎?
沒......
是個好的開始! ?
48hr Hackathon
+
⼈人⽣生第⼀一次視差滾動
GG
- 無 Library 想感受⼀一下最真實的視差滾動
懶得看 Doc
sections.js
http://goo.gl/Dv79sB
sitename

window height

section 1

section 2

我們看到的範圍
sitename

section 1

離開 s1 50%, 進⼊入 s2 50%
section 2
我們需要處理的問題
•

onScroll ?

•

Transition

•

CSS prefix 問題
onScroll 很頓ㄟ
requestAnimationFrame!
不能⽤用 setTimeout 嗎?
看這裡看這裡!
http://goo.gl/aQzlJq

Paul Irish
MDN
by David B. Gleason
那 Transition 勒?
我可以直接這樣
設 Style 嗎?
el.style.top = ‘10px’
看看這張圖吧!
讚!

by 臺⼤大⿊黑客松 - HackNTU
那是不是要規劃怎麼
設定樣式了?
沒錯!
我們看下去吧!
sitename

section 1

離開 s1 50%, 進⼊入 s2 50%
section 2
瀏覽進度需要準確到 px ?
常常需要
讓 區 塊 ⾼高 度 跟 可 視 區 域 ⼀一 樣 ⾼高
就是這樣!

by 徐敏倚
也不想讓 HTML 塞⼤大堆東⻄西 ~
data-200-start=“……”
data-300-end=“……”
純病態 ><
等等
那 vendor prefixes 勒?
重複寫同樣東⻄西
很像傻逼耶
⿊黑啊
我們來偵測 prefix 吧!
getComputedStyle!
那是什麼神⾺馬玩意!
取得最終樣式!
還包含瀏覽器預設樣式!
這…
跟我們現在要做的是有關?
在 css 的 key 裡
我們可以取得 prefix 啊!
// 取得 CSSStyleDeclaration
var style = window.getComputedStyle(document.documentElement);
// 借⽤用 Array 的 join ⽅方法把 CSSStyle...
宇庭太棒了!

by 徐敏倚
by I'll Never Grow Up
結束!
NKO4 視差滾動經驗分享
NKO4 視差滾動經驗分享
NKO4 視差滾動經驗分享
Upcoming SlideShare
Loading in …5
×

NKO4 視差滾動經驗分享

4,188 views

Published on

Published in: Technology, Education
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,188
On SlideShare
0
From Embeds
0
Number of Embeds
1,537
Actions
Shares
0
Downloads
23
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

NKO4 視差滾動經驗分享

  1. 1. 喵~ 喵~ NKO4 視差滾動經驗分享
  2. 2. I am Blue 陳柏穎 poying Ying Chen Po- ? ? Sean ! ⾐衣夫⼈人 記得來參 aws 加
  3. 3. TOUCH Po-Ying Chen NodeJS, Landing Page Justin Liu Chrome E YOUR HEART Gale Yang Blue Chen Cat, Landing Page Promotional video
  4. 4. ㄟㄟ 我們來作⼀一個視差滾動 的宣傳⾴頁啦 ! 有⼈人有作過嗎?
  5. 5. 沒......
  6. 6. 是個好的開始! ?
  7. 7. 48hr Hackathon + ⼈人⽣生第⼀一次視差滾動
  8. 8. GG
  9. 9. - 無 Library 想感受⼀一下最真實的視差滾動 懶得看 Doc
  10. 10. sections.js http://goo.gl/Dv79sB
  11. 11. sitename window height section 1 section 2 我們看到的範圍
  12. 12. sitename section 1 離開 s1 50%, 進⼊入 s2 50% section 2
  13. 13. 我們需要處理的問題 • onScroll ? • Transition • CSS prefix 問題
  14. 14. onScroll 很頓ㄟ
  15. 15. requestAnimationFrame!
  16. 16. 不能⽤用 setTimeout 嗎?
  17. 17. 看這裡看這裡! http://goo.gl/aQzlJq Paul Irish MDN
  18. 18. by David B. Gleason
  19. 19. 那 Transition 勒?
  20. 20. 我可以直接這樣 設 Style 嗎?
  21. 21. el.style.top = ‘10px’
  22. 22. 看看這張圖吧!
  23. 23. 讚! by 臺⼤大⿊黑客松 - HackNTU
  24. 24. 那是不是要規劃怎麼 設定樣式了?
  25. 25. 沒錯! 我們看下去吧!
  26. 26. sitename section 1 離開 s1 50%, 進⼊入 s2 50% section 2
  27. 27. 瀏覽進度需要準確到 px ?
  28. 28. 常常需要 讓 區 塊 ⾼高 度 跟 可 視 區 域 ⼀一 樣 ⾼高
  29. 29. 就是這樣! by 徐敏倚
  30. 30. 也不想讓 HTML 塞⼤大堆東⻄西 ~ data-200-start=“……” data-300-end=“……”
  31. 31. 純病態 ><
  32. 32. 等等 那 vendor prefixes 勒?
  33. 33. 重複寫同樣東⻄西 很像傻逼耶
  34. 34. ⿊黑啊 我們來偵測 prefix 吧!
  35. 35. getComputedStyle!
  36. 36. 那是什麼神⾺馬玩意!
  37. 37. 取得最終樣式! 還包含瀏覽器預設樣式!
  38. 38. 這… 跟我們現在要做的是有關?
  39. 39. 在 css 的 key 裡 我們可以取得 prefix 啊!
  40. 40. // 取得 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];
  41. 41. 宇庭太棒了! by 徐敏倚
  42. 42. by I'll Never Grow Up
  43. 43. 結束!

×