惊人的!使用CSS视差实现很酷的交互效果技巧,做出一些有趣的交互效果。关于利用CSS实现滚动视差效果,之前有一篇文章详细介绍了具体的解决方案——CSS实现视差效果[1]。有兴趣的同学可以先看看这篇文章。这里会用到这样一个纯CSS的视差技术:使用transform:translate3d实现滚动视差这里使用CSS3D来实现滚动视差效果。原理是:我们给容器设置transform-style:preserve-3d和perspective:xpx,那么这个容器中的子元素就会位于3D空间。然后为子元素设置不同的transform:translateZ()。这时候不同元素在3DZ轴方向距离屏幕(我们的眼睛)的距离也是不同的。滚动滚动条时,由于子元素设置了不同的transform:translateZ(),它们滚动相对于屏幕(我们的眼睛)的垂直距离translateY也不同,从而达到滚动视差的效果。关于transform-style:preserve-3d和perspective本文不展开太多篇幅。读者默认是有一定了解的,不是特别清楚。你可以先了解一下CSS3D。核心代码表示为:
