[分享] 原來純 CSS 也可以做出視差捲軸效果 yshlptt PTT批踢踢實業坊

作者: yshlptt (小y) 2014-08-13 14:42:20

今天同事貼給我這個連結，看了裡面 demo 有驚訝到：
http://blog.keithclark.co.uk/pure-css-parallax-websites/
（英文網頁）
原來做視差捲軸效果可以不透過 Javascript，
真是太神奇了傑克！

作者: bs0224 2014-08-13 16:45:00

這好酷!!!!!

作者: WFU (天璣) 2014-08-13 19:11:00

good

作者: Ting1024 (無) 2014-08-13 20:45:00

這有什麼？？就文字捲快捲慢阿

作者: yshlptt (小y) 2014-08-13 21:44:00

另一個網友分享的 SASS 範例，實作原理一樣http://codepen.io/kjbrum/pen/iBjIr

作者: laxgenius (米利) 2014-08-13 22:30:00

3樓好神喔...

作者: fire231 (Bloodmors) 2014-08-14 14:31:00

效果沒很神，重點是它沒有用JS阿= =!!!只是不太懂捨近求遠的方法在效率與效能上有比較好嗎?

作者: yshlptt (小y) 2014-08-14 14:53:00

理論上用 Javascript 來做捲軸動畫效能可能會差一些，但使用 Javascript 在動畫應用上更有彈性，

作者: yanggh (yanggh) 2014-08-14 14:53:00

純css沒跑js，在輸出上應該效率比較好？

作者: yshlptt (小y) 2014-08-14 14:54:00

不只視差效果，各式各樣的動畫都做得出來搜尋 Parallax 可以找到很多酷炫的網站http://www.awwwards.com/websites/parallax/

作者: aceone 2014-08-14 18:13:00

IE11破功支援度太先進的解法還是老實用 js 吧

作者: yshlptt (小y) 2014-08-15 16:05:00

IE 不支援 preserve-3d 的變形，看來只能期待 IE12 了狀態顯示為開發中...http://bit.ly/1Bj1DeI

作者: GoalBased (Artificail Intelligence) 2014-08-15 16:46:00

CSS 效能 > JS

繼續閱讀