正确完成后， 视差滚动看起来不可思议。 这不是您在每个网站上都想要的功能，但对于创意网站和登录页面，视差元素会Swift吸引人们的注意 。
有大量免费JavaScript库可用于动画滚动效果，但是许多库过时或对某些人来说太复杂。
这就是为什么我推荐Rellax.js满足视差需求的原因。 这是一个基于香草JavaScript的免费开源插件，因此没有任何依赖关系 。
默认情况下， 仅需要简单的函数调用即可将视差类分配给页面元素。 然后，在滚动时，这些元素将保持固定并随用户视点一起移动。
您可以自定义这些元素以使其更接近，更远或位于页面元素之后。 这会在页面上产生深度错觉，并且所有这些都通过一个简单JavaScript库起作用。
另请参阅： 如何在静态网页中实现无限页面滚动效果[教程]
如果您想下载副本，则可以在GitHub上免费获得所有Rellax源代码。
整个设置使用针对.rellax类的单个JS函数 ， 如下所示：
var rellax = new Rellax('.rellax');
请注意，您几乎可以使用任何所需的类 ，但是为了简单起见，示例演示使用.rellax 。
从这里开始，您只需使用.rellax类将视差元素包装在div中，并设置speed属性 。 这通过data-rellax-speed 自定义属性起作用，该属性接受从-10到+10的值。
这是演示页面上HTML的示例片段 ：
<div class="rellax" data-rellax-speed="-7"> I'm extra slow and smooth </div>
您也可以在页面上居中放置元素 ，并通过CSS 自定义元素位置 。
Rellax不会告诉您如何构造页面或如何在页面上定义CSS元素。 它所做的就是用纯JavaScript 创建自然的视差滚动效果 。 如何使用它完全取决于您。
要观看实时演示 ，请浏览主站点或浏览GitHub存储库 。 其中包括一些文档，以及使用Rellax.js的实时网站的链接。
最重要的是，团队始终愿意接受请求，因此，如果您发现任何问题或对功能提出建议，只需向团队快速发送消息 。
另请阅读： 使用StickyStack.js轻松进行视差滚动
翻译自: https://www.hongkiat.com/blog/rellaxjs-parallax-script/