介绍
fingerslug 是一款基于 jQuery 的前端文字动画效果库，在实现手写字体滑动效果的同时还支持多种颜色，使用方便，可用于多种场景。
安装
npm 安装
npm install fingerslug
直接引入
<script src="https://cdn.jsdelivr.net/npm/fingerslug/dist/fingerslug.min.js"></script>
使用方法
基本用法
$(selector).fingerslug({
text: 'hello, world!',
duration: 2000
});参数说明
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| text | string | '' | 要展示的文字 |
| duration | number | 2000 | 动画执行的时间（单位：毫秒），越大越慢 |
| colors | array | [] | 文字的颜色，可传递多个颜色，会按照顺序轮流展示 |
| strokeWidth | number | 2 | 路径线条的粗细程度 |
| startDelay | number | 0 | 动画开始前延迟的时间（单位：毫秒） |
| ease | string | 'linear' | 动画效果，可选值有：'linear'、'easeIn'、'easeOut'、'easeInOut' |
| onComplete | function | null | 动画执行完毕的回调函数 |
示例
-- -------------------- ---- -------
------------------------
----- ------- --------
--------- -----
------- ----------- ---------- -----------
------------ --
----------- -----
----- ---------
----------- ---------- -
---------------------- -------------
-
---高级应用
应用场景
本库适用于多种场景，如应用于项目宣传页、产品介绍页、个人博客等。
代码示例
-- -------------------- ---- -------
---- --------------------
------- ----------------------------------------------------------------------
------- ------------------------------------------------------------------------------
--------
------------ -
------------------------
----- ------- --------
--------- -----
------- ----------- ---------- -----------
------------ --
----------- -----
----- ---------
----------- ---------- -
---------------------- -------------
-
---
---
---------总结
fingerslug 是一款非常好用的前端文字动画效果库，可以很方便地实现手写字体滑动效果，还可以选择多种颜色，大大提升了 UI 体验。本文详细介绍了 fingerslug 的安装和使用方法，并提供了应用场景和示例代码供大家参考，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005573a81e8991b448d42e3