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

查看演示立即下载

插件描述：轻量级JS库TypeLighter.js实现打字机效果

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

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

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

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

您还可以使用 CDN 版本：

1	`<script` `src ="/"></script>`

添加新的打字机

1	`<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	启用后，当元素出现在视口中时，动画将立即开始。

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com