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

看板Web_Design作者 (小y)時間11年前 (2014/08/13 14:42), 編輯推噓5(5推 0噓 13→)
留言18則, 9人參與, 最新討論串1/1
今天同事貼給我這個連結，看了裡面 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
推
08/13 16:45, , 1F
這好酷!!!!!
08/13 16:45, 1F
推
08/13 19:11, , 2F
good
08/13 19:11, 2F
推
08/13 20:45, , 3F
這有什麼？？就文字捲快捲慢阿
08/13 20:45, 3F
→
08/13 21:44, , 4F
另一個網友分享的 SASS 範例，實作原理一樣
08/13 21:44, 4F
→
08/13 21:44, , 5F
08/13 21:44, 5F
→
08/13 22:30, , 6F
3樓好神喔...
08/13 22:30, 6F
→
08/14 14:31, , 7F
效果沒很神，重點是它沒有用JS阿= =!!!
08/14 14:31, 7F
→
08/14 14:32, , 8F
只是不太懂捨近求遠的方法在效率與效能上有比較好嗎?
08/14 14:32, 8F
→
08/14 14:53, , 9F
理論上用 Javascript 來做捲軸動畫效能可能會差一些，
08/14 14:53, 9F
→
08/14 14:53, , 10F
但使用 Javascript 在動畫應用上更有彈性，
08/14 14:53, 10F
→
08/14 14:53, , 11F
純css沒跑js，在輸出上應該效率比較好？
08/14 14:53, 11F
→
08/14 14:54, , 12F
不只視差效果，各式各樣的動畫都做得出來
08/14 14:54, 12F
→
08/14 14:56, , 13F
搜尋 Parallax 可以找到很多酷炫的網站
08/14 14:56, 13F
→
08/14 14:56, , 14F
08/14 14:56, 14F
推
08/14 18:13, , 15F
IE11破功 支援度太先進的解法還是老實用 js 吧
08/14 18:13, 15F
→
08/15 16:05, , 16F
IE 不支援 preserve-3d 的變形，看來只能期待 IE12 了
08/15 16:05, 16F
→
08/15 16:06, , 17F
狀態顯示為開發中...http://bit.ly/1Bj1DeI
08/15 16:06, 17F
推
08/15 16:46, , 18F
CSS 效能 > JS
08/15 16:46, 18F
‣ 更多 yshlptt 的文章
文章代碼(AID): #1JwmZFlY (Web_Design)