nko4 視差滾動經驗分享

46
NKO4 視差滾動經驗分享 ~ ~

Upload: po-ying-chen

Post on 08-May-2015

3.580 views

Category:

Technology


4 download

TRANSCRIPT

Page 1: NKO4 視差滾動經驗分享

N K O 4視差滾動經驗分享

喵~

喵~

Page 2: NKO4 視差滾動經驗分享

poyingPo-Ying Chen

陳柏穎

I am Blue

Sean

記得來參加

aws

??

⾐衣夫⼈人!

Page 3: NKO4 視差滾動經驗分享

Chrome E

T O U C H H E A R TYOUR

Justin Liu

NodeJS, Landing Page

Po-Ying Chen

Cat, Landing Page

Gale Yang

Promotional video

Blue Chen

Page 4: NKO4 視差滾動經驗分享

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

有⼈人有作過嗎?

Page 5: NKO4 視差滾動經驗分享

沒......

Page 6: NKO4 視差滾動經驗分享

是個好的開始! ?

Page 7: NKO4 視差滾動經驗分享

48hr Hackathon

⼈人⽣生第⼀一次視差滾動

+

Page 8: NKO4 視差滾動經驗分享

G G

Page 9: NKO4 視差滾動經驗分享

- 無 Library -想感受⼀一下最真實的視差滾動

懶得看 Doc

Page 10: NKO4 視差滾動經驗分享

sections.jshttp://goo.gl/Dv79sB

Page 11: NKO4 視差滾動經驗分享

sitename

section 1

section 2

window height 我們看到的範圍

Page 12: NKO4 視差滾動經驗分享

sitename

section 1

section 2

離開 s1 50%, 進⼊入 s2 50%

Page 13: NKO4 視差滾動經驗分享

• CSS prefix 問題

• Transition

• onScroll ?

我們需要處理的問題

Page 14: NKO4 視差滾動經驗分享

onScroll 很頓ㄟ

Page 15: NKO4 視差滾動經驗分享

requestAnimationFrame!

Page 16: NKO4 視差滾動經驗分享

不能⽤用 setTimeout 嗎?

Page 17: NKO4 視差滾動經驗分享

看這裡看這裡! http://goo.gl/aQzlJq

Paul Irish

MDN

Page 18: NKO4 視差滾動經驗分享

by David B. Gleason

Page 19: NKO4 視差滾動經驗分享

那 Transition 勒?

Page 20: NKO4 視差滾動經驗分享

我可以直接這樣 設 Style 嗎?

Page 21: NKO4 視差滾動經驗分享

el.style.top = ‘10px’

Page 22: NKO4 視差滾動經驗分享

看看這張圖吧!

Page 23: NKO4 視差滾動經驗分享
Page 25: NKO4 視差滾動經驗分享

那是不是要規劃怎麼設定樣式了?

Page 26: NKO4 視差滾動經驗分享

沒錯! 我們看下去吧!

Page 27: NKO4 視差滾動經驗分享

sitename

section 1

section 2

離開 s1 50%, 進⼊入 s2 50%

Page 28: NKO4 視差滾動經驗分享

瀏覽進度需要準確到 px ?

Page 29: NKO4 視差滾動經驗分享

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

Page 31: NKO4 視差滾動經驗分享

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

data-300-end=“……”

Page 32: NKO4 視差滾動經驗分享

純病態 ><

Page 33: NKO4 視差滾動經驗分享
Page 34: NKO4 視差滾動經驗分享
Page 35: NKO4 視差滾動經驗分享

等等 那 vendor prefixes 勒?

Page 36: NKO4 視差滾動經驗分享

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

Page 37: NKO4 視差滾動經驗分享

⿊黑啊 我們來偵測 prefix 吧!

Page 38: NKO4 視差滾動經驗分享

getComputedStyle!

Page 39: NKO4 視差滾動經驗分享

那是什麼神⾺馬玩意!

Page 40: NKO4 視差滾動經驗分享

取得最終樣式! 還包含瀏覽器預設樣式!

Page 41: NKO4 視差滾動經驗分享

這… 跟我們現在要做的是有關?

Page 42: NKO4 視差滾動經驗分享

在 css 的 key 裡 我們可以取得 prefix 啊!

Page 43: NKO4 視差滾動經驗分享

// 把 prefix 揪出來 var prefix = match && match[0];

// 取得 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);

Page 46: NKO4 視差滾動經驗分享

結束!