nko4 視差滾動經驗分享

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

喵~

喵~

poyingPo-Ying Chen

陳柏穎

I am Blue

Sean

記得來參加

aws

??

⾐衣夫⼈人！

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

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

有⼈人有作過嗎？

沒......

是個好的開始！ ?

48hr Hackathon

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

+

G G

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

懶得看 Doc

sections.jshttp://goo.gl/Dv79sB

sitename

section 1

section 2

window height 我們看到的範圍

sitename

section 1

section 2

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

• CSS prefix 問題

• Transition

• onScroll ?

我們需要處理的問題

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

section 2

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

瀏覽進度需要準確到 px ?

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

就是這樣！

by 徐敏倚

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

data-300-end=“……”

純病態 ><

等等 那 vendor prefixes 勒？

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

⿊黑啊 我們來偵測 prefix 吧！

getComputedStyle！

那是什麼神⾺馬玩意！

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

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

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

// 把 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);

宇庭太棒了！

by 徐敏倚

by I'll Never Grow Up

結束！