如何实现视差滚动效果的网页

视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。一般把网页解剖为：背景层、内容层和悬浮层(贴图层)。

当滚动鼠标滚轮的时候，各图层以不同速度移动，形成视差的效果。这就是时差滚动的大致原理。

原理是这样，但落实到技术细节上时，实现的方法却各种各样。

我个人大致归纳了一下：

1、以 “页面滚动条” 作为 “视差动画进度条” 的；

2、以 “滚轮刻度” 当作 “动画帧度” 去播放动画的（或者直接称为“隐藏进度条”）；

3、鉴听mousewheel事件，事件被触发即播放动画，实现“翻页”效果；

下面的回答，均以上述1类的实现方式为基准。

为什么是1类呢？因为它很直观，和我们日常接触到的视频播放器是一样的：

下面，以Every Last Drop这个页面做为分析对象，去回答题主的问题。

做滚动网页的时候，是怎么实现页面的翻页？

首先，根据页面动画所需的分镜，去等比划分进度条。

例如：共有11个分镜，则分镜大致可以划分为：0%、10%、20%、30% .... 100%

但需要注意的是，整个滚动过程实际分为两个部分：分镜切换 和 分镜动画。

我们要预先划分好他们的比例，如：每一个分镜，2%的进度用于分镜切换，7%的进度用于分镜动画。

则进度大致可以划分为：

------------------------------------------

0%(初始，分镜1)

↓

(消耗2%用于切换分镜)

↓

2%(完全进入分镜2）

↓

(消耗8%用于分镜动画的播放)

↓

10%(分镜2动画播放完毕)

↓

(消耗2%用于切换分镜)

↓

12%(完全进入分镜3）

↓

...（略）

------------------------------------------

按照上面的划分，当进度条滚动到10%的时候，就要开始进行分镜2到分镜3的切换，也就是所谓的翻页。当滚动到12%时，翻页结束。其他分镜如此类推。

（如果题主想问的是技术实现细节，估计要失望了！）

在做时间轴的时候，一般都要调用别人的js库。那么这个滚动页面，是不是也有一个js库？

随便在google搜一下，就搜到很多关于视差滚动插件的文章：10个优秀视差滚动插件

这里补充一点：做视差滚动页面绝对是体力活。

本着我为人人的分享精神，还是推荐一个我觉得好用凑合好用的时差滚动库:

Jarallax(Welcome to Jarallax.com)

设计思路清晰，API设计也很直观。依赖于jQuery1.7的版本，再高的版本就不支持了哦！

另外，作者貌似已经没有维护了...

滚动时每层不同滚动速率的实现原理是什么？

初中物理：单位时间相同，位移距离不同，速度也不同。

如何让滚动更加平滑？

这个问题就太大了，能重新开一个问题了。

这边我就简单回答一下吧（不细谈前端技术层面的优化，如：DOM数量、页面渲染优化这些）。

开头处，我提到的三种实现分类，实际上是这样一个情况：

1类是最自由的，用户甚至可以直接调整进度条，实现“快进”。

在这种设计下，用户鼠标滚轮的最小刻度，就是动画的一帧。因为不同浏览器之间，鼠标滚轮的最小刻度是不一样的。这就导致了，在不同浏览器之间，页面滚动过程中，动画播放的帧率是有差异的。如果遇到奇葩浏览器，鼠标滚动的最小刻度很大，动画甚至会出现“掉帧”的情况。

解决方法很简单，一般采取增加页面长度的方式，来稀释鼠标滚轮的最小刻度。

但还是会有一些情况出现，如户快拖动进度条时，“掉帧”的情况难免还是会出现。

3类的实现，滚轮只是动画的触发按钮。当用户滚动了一下鼠标，之前设计好的动画就开始播放。当播放结束后，对滚动事件的监听，才会重新被激活。这种设计，弱化了交互，但提供了更优质的动画展现。因为动画的播放时间和帧率不是用户控制的，是事先代码所设定好的。

2类就不说了，介乎与1和3之间。

简单的说，鱼(流畅)与熊掌( *** 控性)不可得兼。

       首先，我们来看一下什么叫 视差滚动 。视差滚动就是 让多层背景以不同的速度进行移动而形成的效果 。可能这句话不是很好理解，我们可以查看 这点网址 来直观的感受一下。

       当我们慢慢滚动页面的时候，会发现 产品主图 和 产品详情 滚动的速度不一致， 产品详情 以正常的速度进行滚动，但是 产品主图 要比 产品详情 滚动慢一倍，所以形成了 视差效果 。你也可以参照下面我给你贴出来的图：

可能从图上，不能直观的感受出来，建议您还是点看上面的网址，直观的感受一下。

        视察滚动：让多层背景以不同的速度去进行移动

       1、至少需要拥有两层背景（缓慢移动区、正常移动区）

       2、将背景设置为相对布局（为缓慢移动设置 top 来缓冲掉 scroll 滚动）

       3、监听 Parallax 组件的滑动，根据滑动来计算 缓慢移动区 top 的值。

       说白了，就是对 缓慢移动区 通过使用相对布局 relative &top 来弥补正常滚动产生的距离。话不多说，咱们码上见真情。

       考虑到可能要有多处使用到这个效果，所以，我们将其封装成组件，通过vue插槽的方式，来实现组件的复用。当然，这里我们默认，您对vue有比较好的掌握。

       模版中，我们使用了两个 slot ,分别接受 缓慢移动区 和 正常移动区 的内容，同时监听了 .parallax 的 scroll 事件，用于判定 缓慢移动区 距离顶部的距离。接着为 .parallax-slow 绑定了属性 :style="{top: slowTop}" , 确定滚动发生后，其距离顶部的距离。

       这里一定要注意 .parallax 一定要添加 position: absolute或者 position: fixed,否则，它的 scroll 事件不生效。具体的原因，你可以查看一写css相关的内容，此处不在多叙。

       另外就是 缓慢移动区 和 正常移动区 要设置 position:relative ,这个很重要。

       这个组件的行为主要是就是要计算 缓慢移动区 距离顶部的距离 top ,所有的工作都是围绕着这个逻辑进行实现的。

       我们在视图组件（Home）中使用 视差组件 。

        到此，我们的效果就可以实现了，那么为什么要使用这中效果呢？我个人觉效果是一方面，另一方面还是为了突出页面中的 重点元素 ，比如商品详情页面中， 产品主图 肯定是我们的重点元素，所以让他滑动的慢一些可以增强用户体验。为了照顾有些不喜欢阅读文章的同学，我将 Parallax 组件的内容贴出来。

        最后，感谢您的阅读，祝您学习进步。

苹果公司 macOS 上的幻灯片制作软件 Keynote 是出色的演示工具，对于设计师来说，也能用它来展示网页设计稿。使用到的功能是非常拉风的【神奇移动】（Magic Move）。

先说说【神奇移动】在做普通幻灯片制作中的应用。所谓【神奇移动】，它是一种幻灯片之间切换的动画效果。 如果两张幻灯片中存在共同的某种元素——图片，文本框或其他，那么对其设置【神奇移动】后，它将会从第一张幻灯片中的位置平滑地移动到第二张幻灯片中的位置。因为它不是先消失再以某种方式出现，而是一直存在于显示屏上，故名为神奇移动。 如图1所示.

设置【神奇移动】的方法。按照上面的定义，制作的关键是两张幻灯片中那个相同的元素，才能有神奇移动的效果。「相同」，意味着它们属于同一个。比如对于文字，不是在第二张幻灯片中有那个相同的文本就叫存在相同的元素，而是复制第一张幻灯片中的那个文本，粘贴到第二张幻灯片中，这才叫「相同」。对于图片也是一个道理。就算在第二张幻灯片中该文本发生了大小、文字样式等格式上的变化，它们依然会被视为同一个元素，因为它是复制自第一张幻灯片。 如图2和图3.

将两张幻灯片中「相同的」元素摆放到你喜欢的位置后，点击制作好的幻灯片（是点击左侧列表的某张幻灯片，而不是幻灯片中的某个元素，因为【神奇移动】是页面切换的动画效果。如果你选中了某个元素，在右上方的【动画效果】里是找不到【神奇效果】的。 ），在右上角的 *** 作面板中，可以看到三个按钮，分别是【格式】【动画效果】【文稿】，点击【动画效果】-【添加效果】，在列表中找到【神奇移动】。 如图4.

搭配上幻灯片上其他元素的切换效果，点击顶部 *** 作栏的【播放】按钮就能看到神奇移动了。 如图5所示 （gif图片没有制作好，初始移动位置应为左上角。）

解释完了【神奇移动】，接下来要说说如何用它来制作「视差」的网页滚动效果。这里有了一个新的概念——「视差」，英文叫 Parallax，通俗地说，是指若在同一位置观察不同远近的移动物，它们的移动速度是不同的。比如我们坐在行驶中的动车里，看到远处的山和近处的房子，它们向后移动的速度并不相同。这个概念被应用到平面设计领域，就是指在浏览网页的过程中，某些元素出现和消失的速度不同。近年来，好多网站都出现了这样都设计。 如图6

要实现这样的效果，有很多原型设计软件都能够完成，比如 Principle、Flinto等。但是若利用 Keynote 中的【神奇移动】，能比较快捷地达到展示目的。

首先，要把设计稿从设计软件导入到 Keynote 中来。需要说明的是，没有插件能帮你直接导入，只能通过手动复制和粘贴逐一将设计搬到 Keynote 中。方便的是，你的设计稿中不论是文字、图片、「组」或甚至是画板，粘贴到 Keynote 中，都将被识别为图片，这样能方便你对其进行移动。

和上面移动文字的例子类似，要想达到滑动页面的效果，只要将前后两张幻灯片的元素都复制粘贴好（再复习一次，这样才能让 Keynote 明白它们是「相同」元素），将前一张的元素复制粘贴到后一张幻灯片并摆放到显示区域外的上边、后一张的元素复制粘贴到前一张并摆放到显示区域到下边。这样在播放的时候，有了【神奇移动】的加持，前一张幻灯片的内容就会向上移动离开画面，后一张幻灯片的内容从下到上进入显示屏，就像我们向上滑动网页一样。 如图7.

视差效果的表现是，随着页面的移动，页面上的元素有各自的移动速度。那么，只要通过设置不同元素在幻灯片外不同的垂直距离，那么它们神奇移动的速度就会不同。 移动快的元素摆放得离幻灯片近一点，移动慢的元素则摆放得远一点。 如图8.

逐一对每张幻灯片进行上述的设置，在播放的时候通过鼠标点击就能实现页面滚动的效果，并且带有视差效果。 如图6.

---