Rellax.js，一款超酷的 JavaScript 滚动效果库

最新推荐文章于 2024-08-29 07:41:40 发布

繁华落尽Owenlee

最新推荐文章于 2024-08-29 07:41:40 发布

阅读量359

点赞数 1

分类专栏：前端文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_41381554/article/details/134892415

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

嗨，大家好，欢迎来到猿镇，我是镇长，lee。

又到了和大家见面的时间，今天和大家分享一款轻松实现视差滚动效果的 JavaScript 库——Rellax.js。无需大量的配置，即可为你的网站增色不少。

什么是Rellax.js？

Rellax.js 是一个轻量级、高性能的 JavaScript 库，专门设计用于创建流畅的视差滚动效果。不熟悉术语的小白们，视差滚动效果即在页面滚动时，不同元素以不同速度滚动，创造出层次感和动感。

https://yaireo.github.io/rellax/

安装与基础使用

首先，你需要在你的项目中引入 Rellax.js。你可以通过直接下载它或使用npm安装。

<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>

或者使用npm：

npm install rellax

引入之后，初始化 Rellax

var rellax = new Rellax('.rellax')

这里的 '.rellax' 是你希望应用视差效果的元素的选择器。

基本配置

Rellax.js 提供了一系列的配置选项，以满足不同需求。以下是一些常用的配置选项：

speed（速度）: 控制元素滚动的速度。值越小，滚动越慢。
```
var rellax = new Rellax('.rellax', {
  speed: -2,
});
```

center（居中）: 是否将元素保持在视口中心。

var rellax = new Rellax('.rellax', {
  center: true,
});

wrapper（包装器）: 如果你想在特定的容器内应用视差效果，可以指定包装器。
```
var rellax = new Rellax('.rellax', {
  wrapper: '.custom-wrapper',
});
```

示例

让我们通过一个简单的示例来看看 Rellax.js 的魔力。首先，在你的 HTML 文件中创建一些具有 'rellax' 类的元素：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="rellax lg-green"></div>
    <div class="rellax lg-blue" data-rellax-speed="7"></div>
    <div class="rellax sm-green" data-rellax-speed="-4"></div>
    <script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
    <script>
      var rellax = new Rellax('.rellax')
    </script>
  </body>

  <style>
    /* 省略 */
  </style>
</html>

这样，当你滚动页面时，你会看到这些元素以不同的速度滚动，产生出色彩斑斓的视觉效果。