Delighters.js 是一个轻量级的 JavaScript 库，它可以让你在页面滚动时触发 CSS 动画效果。这是一个非常有趣和有用的功能，可以帮助网站设计者为用户提供更好的交互体验。
为什么要使用 Delighters.js？
当我们在浏览网页时，我们通常会对那些动态、美观的页面印象深刻。Delighters.js 可以通过添加一些简单的动画效果来增强页面的可视性，从而使您的网站更具吸引力，并提高用户留存率。
另外，由于 Delighters.js 使用 CSS3 动画，因此可以确保在所有现代浏览器中都能够正常工作。
如何使用 Delighters.js？
步骤 1：下载 Delighters.js
首先，您需要从 GitHub 下载 Delighters.js 文件。您可以将其直接复制到您的项目中，或者使用 npm 安装：
npm install delighters --save
步骤 2：引入 Delighters.js
在 HTML 文件中，您需要添加对 Delighters.js 的引用。您可以在 <head> 标签中添加以下代码：
<script src="path/to/delighters.min.js"></script>
步骤 3：为所欲为
Delighters.js 主要通过添加 CSS 类来触发动画效果。您可以在 HTML 元素上使用以下类：
delighter：必需，在要触发动画的元素上添加delighter--start：可选，指定动画开始时的样式delighter--end：可选，指定动画结束时的样式
例如：
<div class="delighter delighter--start" data-delighter> ... </div>
在这个示例中，我们将一个 <div> 元素标记为需要触发动画，并在它的 CSS 中定义了两个不同的状态。
步骤 4：初始化 Delighters.js
最后，您需要在 JavaScript 中初始化 Delighters.js：
const delighters = new Delighters(); delighters.init();
示例代码
以下是一个完整的示例代码，演示如何在页面滚动时使用 Delighters.js 触发动画效果：
-- -------------------- ---- -------
--------- -----
------
------
-------------------- ------------
------- -----------------------------------------
-------
---------- -
-------- --
----------- ------- -----
-
----------------- -
-------- --
-
------------------ -
-------- --
-
--------
-------
------
---- ---------------- ----------------- ---------------
----------------- ---------
-------- ----- ----- --- ----- ----------- ---------- ----- --- ----- -------- ----------
------
---- ----------------- ---------------
--------- ------------------
---------------- -- - ----------- ---------- ------- ---- ------ --- -- ------- --- ---------- -- -----------
------
---- ----------------- ---------------
------- --- -------------------
---------------- --- ---- --- ------- --- ------ ------ -- ---- ------- --- ------- ---- --------- ----- -- ------ ------ --------- ------------
------
--------
----- ---------- - --- -------------
------------------
---------
-------
-------结论
Delighters.js 是一个非常有用的前端库，可以帮助您为网站添加动画效果，从而增强用户体验。它易于使用、可自定义样式，并且与现代浏览器兼
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9013
