[分享] 原來純 CSS 也可以做出視差捲軸效果

[yshlptt (小y)]

今天同事貼給我這個連結，看了裡面 demo 有驚訝到：
http://blog.keithclark.co.uk/pure-css-parallax-websites/
（英文網頁）

原來做視差捲軸效果可以不透過 Javascript，
真是太神奇了傑克！

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.163.10.192
※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1407912143.A.BE2.html
推 bs0224: 這好酷!!!!!
推 WFU: good
推 Ting1024: 這有什麼？？就文字捲快捲慢阿
→ yshlptt: 另一個網友分享的 SASS 範例，實作原理一樣
→ yshlptt: http://codepen.io/kjbrum/pen/iBjIr
→ laxgenius: 3樓好神喔...
→ fire231: 效果沒很神，重點是它沒有用JS阿= =!!!
→ fire231: 只是不太懂捨近求遠的方法在效率與效能上有比較好嗎?
→ yshlptt: 理論上用 Javascript 來做捲軸動畫效能可能會差一些，
→ yshlptt: 但使用 Javascript 在動畫應用上更有彈性，
→ yanggh: 純css沒跑js，在輸出上應該效率比較好？
→ yshlptt: 不只視差效果，各式各樣的動畫都做得出來
→ yshlptt: 搜尋 Parallax 可以找到很多酷炫的網站
→ yshlptt: http://www.awwwards.com/websites/parallax/
推 aceone: IE11破功 支援度太先進的解法還是老實用 js 吧
→ yshlptt: IE 不支援 preserve-3d 的變形，看來只能期待 IE12 了
→ yshlptt: 狀態顯示為開發中...http://bit.ly/1Bj1DeI
推 GoalBased: CSS 效能 > JS