在前端开发中，页面滚动效果非常常见。而 skrollr-typed 是一款 npm 包，可以帮助我们快速实现页面滚动时的文字打字效果。
安装 skrollr-typed
在使用 skrollr-typed 之前，我们需要先将其安装到我们的项目中。
使用 npm 进行安装：
npm install skrollr-typed --save
使用 skrollr-typed
引入 skrollr-typed
import "skrollr-typed";
在 HTML 元素中添加 data-typed 属性
<div data-typed="Hello World"></div>
初始化 skrollr
window.skrollr.init();
skrollr-typed API
skrollr-typed 提供了一些可选的参数和回调函数，可以根据需要进行配置。
参数
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| delay | 数字 | 50 | 单位为毫秒，表示打字每个字符之间的时间间隔 |
| removeCursor | 布尔值 | true | 是否在结束打字后自动移除光标 |
| hideCursor | 布尔值 | false | 是否隐藏光标 |
| blinkInterval | 布尔值 | 1000 | 单位为毫秒，表示光标闪烁的时间间隔 |
| initDelay | 数字 | 500 | 单位为毫秒，表示打字效果初始化前延迟的时间 |
| reset | 布尔值 | false | 是否在页面滚动回到该元素时重新开始打字效果，一般用于需要多次触发打字效果的场合，如页面滚动到底部后滚动回顶部再次触发 |
| onComplete | 函数 | 无 | 打字效果结束时的回调函数 |
| onStart | 函数 | 无 | 打字效果开始时的回调函数 |
| onType | 函数 | 无 | 每次打字时的回调函数，接收正在打字的字符串作为参数 |
| onBeforeType | 函数 | 无 | 打字效果开始前的回调函数 |
| onRemove | 函数 | 无 | 光标移除时的回调函数 |
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-------------------- ----------
-------
-------- -
------- -------
-
------ -
--------- ---------
---- -----
----- -----
---------- -----
------ -----
----------------- -----
-------- -----
------ --
------- -----
-
--------
-------
------
---- ----------------
----------- ------
----
-------------
-------------------
-----------------------
-----------------------------
------------------ ---- -- ---------------
-------
------
---- ----------------
----------- ------
------
---- ----------------
----------- ------
----
-------------
-------------------
-----------------------
-----------------------------
---------------- --- -- ---------- ---- ---------
-------------------------------------------------------
-------
------
---- ----------------
----------- ------
------
------- ------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------
--------
----------------------
---------
-------
-------在这个示例中，我们创建了 4 个高度为 1000px 的 .section 元素，其中在第一个和第三个 .section 元素中添加了一个 .typed 元素，通过 data-typed 属性指定了打字效果的文本，通过 data-0 和 data-top 属性指定了打字效果的开始位置和结束位置，在 data-anchor-target 属性中指定了父元素的选择器，使打字效果可以随页面滚动而运动。
通过 data-typed-options 属性我们可以修改默认的参数。在第三个 .section 的 .typed 元素中，我们将 delay 值修改为 100，removeCursor 值修改为 false，表示每个字符之间打字的间隔变为 100 毫秒，完成打字后光标不会自动移除。
在 JavaScript 中我们通过 window.skrollr.init() 初始化 skrollr。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005537081e8991b448d0a2d