（技术贴）视差滚动网站逐层分析

        今天要分析的网站（oh deer games网址http://www.ohdeergames.com/）效果如下，我主要是从自己对这个网站的制作原理的理解角度来写这篇文章的。

        oh deer games是一个视差滚动（Parallax Scrolling）网站。视差滚动是指让多层背景以不同的速度移动，形成立体的运动效果。（百度百科）

        oh deer games网站初初给人震慑的画面，只需要鼠标滚动或点击“welcome”前按钮，画面便铺展开来，着实让人惊艳。而这个关键的步骤体现在了设计师运用的一点小心机：局部透明。

        这是一张2900*1631的图片，虽然尺寸大，但图片被压缩到只有70k。整个画面通过这个大遮罩，视觉被集中在页面中心。然后又通过放大的方式将覆盖在其上面的图片驱出视野达到展示全景，有点像镜头拉近的效果。

        这个动画是绘制在html5的画布canvas上。canvas实现动画效果并不难，只需要在画布上做更新和绘制，甚至可以将某个时间的像素信息保存起来。我们用鼠标在页面的图片上右击，看到可以“图片另存为”，别高兴太早，此时我们保存的并不是这张大遮罩图片，也不是视差滚动所运用的各层图片，而是在此时canvas存储的当前图像信息，“图片另存为”会得到下面的这张图。

       从这张图，我们很难进一步研究网站的实现机制，因为网站呈现给我们的是此时此刻画布上显示的图像，而我们所获取的这张图中的所有元素都在运动。尽管这个网站复杂，但是和我们之前看到的视差滚动网站还是存在很大的相似之处。 一开始我们从视差滚动的形成原理我们知道了其有两个重要的因素：图片分层和速度。

          （1）图片分层

        canvas画布让我们获取图片增加了难度，不过没关系，我们可以利用浏览器审查源码的功能取到各种素材图片如下。

           网站是利用脚本将这些分层的图片都绘制在了canvas上。为了精准地定位图层，我去扒了下它的源码，不难找出它们在三维空间中的分布

        在这里我们可以获取背景渐变的颜色以及所有图层的三维坐标（截图只是展示了背景分层坐标），不难看出，图片在z轴和y轴微小变化，网站主要是通过图片在z轴上的层层分布将这些背景有序地叠放在一起，我将获取的z轴数值重新在AE中进行还原再现布局（获取到图片不用读三维坐标也可以大致将场景还原。）

        可以根据颜色代码将渐变背景补充完整，通过对各图层位置的变换和透明度，我们就可以使画面动起来了。

      （2）速度

        网站是利用1000ms／30渲染一次，为了压缩制作gif的大小，我将帧速率设置为25。所有的分层的图片以一样的帧速率进行渲染，我们却可以控制他们变化的速度。

        各图层的移动速度由与观察者的距离决定。近景图片的移动速率要大于远景，达到以视差模拟三维，以时间换取空间的效果。为了进一步压缩gif的大小，我的速度调节比较快。

        视差滚动依靠的背景图层多了往往会影响网站的加载速度。如何确保用户流畅的交互体验往往与技术人员乃至设计人员分不开。