nko4 視差滾動經驗分享
TRANSCRIPT
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’
看看這張圖吧!
那是不是要規劃怎麼設定樣式了?
沒錯! 我們看下去吧!
sitename
section 1
section 2
離開 s1 50%, 進⼊入 s2 50%
瀏覽進度需要準確到 px ?
常常需要 讓區塊⾼高度跟可視區域⼀一樣⾼高
也不想讓 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 I'll Never Grow Up
結束!