CSS视差滚动效果

一、惊艳Demo先体验

你是否曾听说过视差滚动效果？通常，这一效果大多通过JS实现，也有对应的插件如Parallax.js。但实际上，如果你对兼容性要求不高，比如可以忽略IE浏览器，那么只需简单的几行CSS代码，就能实现视差滚动效果。让我们先来感受一下这个神奇的效果（适用于IE9及以上版本）。进入Demo，滚动滚动条，最好鼠标慢慢拖动，你会发现表情花朵等小图标在手机图片上方飞动的视差感觉。目前，Chrome以及FireFox等浏览器（不包括IE11在内的浏览器）都能完美呈现这一效果。

二、深入CSS实现原理

原理其实非常简单，关键在于几个关键的CSS声明（红色高亮部分）。具体来看，代码片段如下：

1. .container { / 滚动容器 / perspective: 1px; padding: 0; height: calc(100vh - 300px); overflow: auto; }

2. .box { / 视差元素的父级需要3D视角 / height: 1280px; transform-style: preserve-3d; position: relative; }

3. .background { / 滚动比较慢的背景元素 / position: absolute; left: 50%; transform: translate3D(-50%, -120px, -1px) scale(2); }

其中的红色高亮代码出现了perspective的1px，translate3D中的-1px以及scale(2)。这些数字之间有何关系呢？我们可以参考一个狼蚁网站SEO优化的3D视角示意图来解释。当我们从屏幕前方看后方时，由于近大远小的视觉原理，我们看到的内容大小会发生变化。通过CSS的scale函数将内容放大到原来的两倍，正好使得在平面上看起来大小合适。虽然在实际的三维空间中，物体的大小和位置发生了改变，但在滚动时，位移变化仍然保持一定比例。举个简单的例子，坐在快速行驶的车上看远处的景物，虽然车在动，但景物似乎并未移动，这就是视差体验的一种模拟。网页中的3D效果模拟了真实世界的三维效果，因此也能带来这种独特的视差体验。

让我们一同这个充满魅力的世界，用简单的CSS代码感受视差滚动的奇妙效果。更多精彩内容，期待你的发现与学习！