vanilla.js_Rellax.js –使用Vanilla JavaScript的免费视差功能

正确完成后， 视差滚动看起来不可思议。 这不是您在每个网站上都需要的功能，但对于创意网站和登录页面，视差元素会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的实时网站的链接。

最重要的是，团队始终愿意接受请求，因此，如果您发现任何问题或对功能提出建议，只需向团队快速发送消息 。

翻译自: https://www.hongkiat.com/blog/rellaxjs-parallax-script/