简介
glurp 是一个具有视差效果的滚动库，可以轻松地为网站增加视觉动态效果。它可以通过 npm 包管理器进行安装，是一个由 JavaScript 编写的纯前端库。
安装
可以在命令行中使用以下命令安装：
npm install glurp
在安装完成后，在项目中可以使用以下方式引入 glupr：
import Glurp from 'glurp';
使用
初始化
在使用 glurp 前，需要先对它进行初始化操作。可以使用以下代码：
const glurp = new Glurp();
可以在初始化的时候设置一些参数，来控制 glurp 的行为。例如：
const glurp = new Glurp({
elements: '.glurp',
intensity: 25,
axis: 'y',
relativeInput: true,
center: true,
});elements：指定应用效果的元素选择器。intensity：指定效果的强度。可选范围为 1-100。axis：指定动画的方向。可以是 x 或 y。relativeInput：指定输入的数据类型是否是相对于容器大小的比率。默认为 true。center: 是否在可视区域中心进行缩放。默认为 false。
销毁
当 glurp 的效果需要被移除时，可以使用以下代码：
glurp.destroy();
配置
可以在初始化完成后，通过以下方法来修改 glurp 的配置：
glurp.setConfig({
intensity: 50,
axis: 'x',
});示例
下面是一个简单的例子，演示了如何在一个滚动页面中使用 glurp：
-- -------------------- ---- -------
------
---- ----------------
---- --------------------
------
---- ----------------
---- --------------------
------
------- ---------------------------------------------------------
--------
----- ----- - --- -------
--------- ---------
---------- ---
----- ----
-------------- -----
------- -----
---
---------
-------在上述例子中，创建了一个具有两个 section 的滚动页面，每个 section 中都包含一个 class 为 glurp 的元素。在引入 glurp 库后，在 script 标签中创建了一个 Glurp 实例并将相应的参数传入进行初始化。初始化完成后，glurp 会自动为每个 class 为 glurp 的元素应用视差效果。
总结
glurp 是一款简单易用的前端滚动库，可以快速地增加网站的视觉动态效果。通过该文章的介绍，您应该已经掌握了 glurp 的基本使用方法。在实际应用中，您也可以根据自己的需要来设置参数来调整 glurp 效果的强度和方向。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e71255dee6beeee7483