介绍
scrollme.js 是一个基于 jQuery 的 npm 包，用于控制网站滚动效果。它可以让你很方便地添加淡入淡出、平移、旋转、缩放等效果，同时又不需要编写繁琐的代码。它适用于所有现代浏览器，并且使用简介、易用。
安装
你可以在 npm 中直接安装 scrollme.js：
npm install scrollme
然后在 HTML 中引入相关的文件：
<link rel="stylesheet" href="path/to/scrollme.css"> <script src="path/to/jquery.min.js"></script> <script src="path/to/scrollme.min.js"></script>
使用方法
HTML
首先，你需要添加 data-scrollme 属性到你想使用效果的要素上，该属性的值包含各种效果，以及它们的速度和运动方式。例如：
<div data-scrollme='{"x": 0, "y": -100, "opacity": 1, "rotate": -360, "scale": 0.5, "duration": 1000, "ease": "easeOutCirc"}'>
这是一个使用 scrollme.js 的 DIV。
</div>上面的代码表示，当网页滚动到这个 DIV 时，它会以动画的形式向上(即 y 轴上)移动 100 个像素，同时执行 360 度的旋转、0.5 的缩小以及 1 秒的动画时间，并且使用一个缓动函数 easeOutCirc。
CSS
为了实现更好的效果，我们还需要通过 CSS 让元素初始状态（不滚动时）的位置与滚动效果一致。例如，上面提到的 DIV 的 CSS 可以这样写：
-- -------------------- ---- ------- ------------------ - --------- --------- -- -- - -- ----- -- -- -- ---- -- ---- ------- -- -------- - -- -------- -- -- ------- ---- -- ---------- ------------- -- ------ --- -- ---------- --------- ----------- --------- -- --------- ------- -- --------- -
JavaScript
最后，在 JavaScript 中添加以下代码即可实现滚动效果：
-- -------------------- ---- -------
---------------------- ---------- -
------------------------------------ -
--- ----- - --------
--- -------- - ----------------------------------------
--- --- - -------------------- - ----------------------
--- ----- - --------------------
--- --- - -------------------
------ - ----- -- --- - ---- -
--- -- - ---- - ------ - ---- - ------ - -------------------
------- --- -- --------- -
--- ----- - --------------
------------------------------------------------- ----- - ----- - -- - ----
--------------------------------------- ----- - ----- - -- - -------------------
----------------------- ----- - ----- - -- - ------ - -- - ----------- - ------------------- ----
-------------- -------
-
-
---
---------------------这段代码在页面滚动时，对每个带有 data-scrollme 属性的元素进行计算，并根据对应的数值，使用 CSS3 的 transition 属性使效果平滑地出现。
例子
我们可以通过下面的例子实现：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------------
----- ---------------- --------------------------------------------------------------------------------
----- ---------------- --------------------------------------------------------------------------------
----- ---------------- --------------------------------------------------------------------------------
----- ---------------- --------------------------------------------------------
-------
---- -
------------ ------- -----------
----------------- --------
---------- -----
-
------- -
------- ------
----------------- -----------------------------------------------
---------------- ------
-------------------- ------ -------
--------- ---------
-
------------- -
---------- ----
----------- -------
----------- ----
------ -----
------------ --- --- - -----
-
---------------- -
---------- ----
----------- -------
----------- -----
------ -----
-
------- -
-------- -------------
-------- ---- -----
---------- -----
------------ ----
------------ ----
----------- -------
------------ -------
--------------- -------
------- --------
----------------- --------
----------------- -----
------ -----
------- --- ----- --------
-------------- ----
-------- --
----------- ------- --- -----
-
------------- -
----------------- --------
------------- --------
-
--------------- ------------- -
-------- -----
-
-------- -
-------- ----- --
--------- ---------
--------- -------
-
-------------- -
---------- ----
------ -----
----------- -------
-------------- -----
-
-------- -------- -
------ -----
---------- ------
------- - -----
----------- -------
-
----------- -
-------------- ----
---------- -----
------- ---- -----
-
----- -
----------------- -----
----------- -------
-------- ---- --
-
----- ------- -
-------- -------------
------ ------
------- -----
-
----- ------- -- -
-------------- --
-
----- ------- - -
----------- -----
---------- -----
------ -----
-
-------- -
----------------- --------
----------- -------
------ -----
-------- ----- --
-
------------- -
-------- -------------
-------- -----
----------------- ---------------------
-------------- ----
-
------------- ------------- -
-------------- -----
------- -----
-------------- -----
-------- ---- -----
-
--------------------- -
------- ------
-
----------------- ------ -
------------- -
---------- ----
----------- ----
-
---------------- -
---------- ------
-
----- -
-------- ---- --
-
----- ------- -
------ -----
------- ---- --
-
-------- -
-------- ---- --
-
------------- -
-------- -----
-
-
--------
-------
------
------- -------------- ------------------------------------------------------
--- -------------------- -------------------------------------------------------------------
--- ----------------------- ---------------------------------------------------------------------
-- -------- ------------- --------- ------------------------------------------------- --------
---------
-------- --------------- --------------------------------------------
--- --------------------- -------------------------------------------------------------------
---- --------------- --------------------------------------------
---- -------------------------------------------- ------------ ------ ------------------ ----------------------------------------------------------
-- --------------------------------------------
----- ----- ----- --- ----- ----------- ---------- ----- ---- --- ---- ----- ----- --------- ----- ---- ------- -------- ----- -- --------- ------ -------- --------- ----- ----- -- -------- --
--- --
-------- ------ ----- ----- -------- ------ --------- --- -------- ---------- ----- ---- --------- -------- ---- ---- ------- -----
----
------
----------
-------- ------------ --------------------------------------------
--- --------------------- ---------------------------------------------
--------- -----------
-----
---- --------------- --------------------------------------------
---- -------------- ------------------------------------------
---- -------------------------------------------- --------- ------ ------ -------------------
---------- ------
-------- ----- ----- --- ----- ----------- ---------- ---------
------
---- -------------- ------------------------------------------
---- -------------------------------------------- --------- ------ ------ -------------------
---------- ------
-------- ----- ----- --- ----- ----------- ---------- ---------
------
---- -------------- ------------------------------------------
---- -------------------------------------------- --------- ------ ------ -------------------
---------- ------
-------- ----- ----- --- ----- ----------- ---------- ---------
------
---- -------------- ------------------------------------------
---- -------------------------------------------- --------- ------ ------ -------------------
---------- ------
-------- ----- ----- --- ----- ----------- ---------- ---------
------
------
----------
-------- --------------- --------------------------------------------
--- --------------------- ---------------------------------------------
------------- ---------
-----
----- -------------------- ------------------------------------------
------ ----------- -------------------- ------------------ ---------
------ ------------ -------------------- ------------------- ---------
--------- -------------------- --------------------- --------------------
------- ------------- --------- ------------------ ----------------
-------
----------
------- --------------------------------------------------------------------------------
------- ---------------------------------------------------------------
--------
---------------------------- -
--- -------- - --- -----------
---
---------
-------
-------结论
scrollme.js 是一个非常方便易用的 npm 包，它可以让您轻松实现网站的滚动效果。通过在 HTML 属性中设置效果以及在 CSS 中设置初始位置和样式，再结合 JavaScript 在滚动时计算元素位置和应用效果，你可以快速构建出富有动态感和视觉冲击力的网站。只需要少量的学习和代码，就可以展示出称霸全网的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562de81e8991b448e057e