[分享] 原来纯 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

继续阅读