轻量级JS库TypeLighter实现打字机效果

更新时间：2019-08-25 00:34:53

使用方法

要安装TypeLighter.js，您只需使用脚本标记导入它。 完成后，使用typeWriter类创建新的动态动画元素。 为方便起见，CSS会自动注入DOM，但您也可以将其粘贴到CSS文件中。

将.js文件放在您的文件夹中，然后将其导入到body标签之后：

<script src ="path/typelighter.min.js"></script>

您还可以使用 CDN 版本：

<script src ="https://cdn.jsdelivr.net/npm/typelighterjs/typelighter.min.js"></script>

添加新的打字机

<span class="typeWriter" data-text='["foo"]'></span>

可深度定制。|

有了这个插件，八个属性允许您微调您想要与用户共享的体验。 其中大多数是预定义的，但您可以使用data属性更改其值。

使用数据标签设置属性以定制效果

<p>Deeply <span class="typeWriter" data-max="1.5" data-text='["satisfying.","customizable."]'</span></p>

禁用随机写入

<p>Deeply <span class="typeWriter" data-random="false" data-text='["satisfying."]'></span></p>

属性列表

属性	默认值	使用
data-text	Null	保持字符串的数组一个接一个地写入。
data-speed	1	写入速度与此整数成比例。
data-start	500 (ms)	写下一个字符串之前的延迟。
data-end	2000 (ms)	删除当前字符串之前的延迟。
data-random	True	启用后，TypeWriter会在写入或删除下一个字符之前等待一段随机时间。
data-max	Infinity	TypeWriter停止之前的最大完整迭代次数。
data-dltSpeed	True	启用后，删除给定字符串的速度是写入字符串的两倍。
data-checkVisible	False	启用后，当元素出现在视口中时，动画将立即开始。

PREVIOUS:
NEXT:
jQuery nav导航（原创）
jQuery弹窗插件syalert.js