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

所属分类:-

 7556  180  查看评论 (0)
分享到微信朋友圈
X
轻量级JS库TypeLighter实现打字机效果 ie兼容8

更新时间: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-textNull保持字符串的数组一个接一个地写入。
data-speed1写入速度与此整数成比例。
data-start500 (ms)写下一个字符串之前的延迟。
data-end2000 (ms)删除当前字符串之前的延迟。
data-randomTrue启用后,TypeWriter会在写入或删除下一个字符之前等待一段随机时间。
data-maxInfinityTypeWriter停止之前的最大完整迭代次数。
data-dltSpeedTrue启用后,删除给定字符串的速度是写入字符串的两倍。
data-checkVisibleFalse启用后,当元素出现在视口中时,动画将立即开始。
相关插件-

基于ion.rangeslider.js 左右拖动滑块选择区间价格范围

基于ion.rangeslider.js 移动端左右拖动滑块选择区间价格范围js代码,可动态取值,用的更方便
 
 18354  286

jquery横向纵向时间轴

demo1是纵向时间轴,demo2是横向的,
 
 38891  371

砸金蛋

不带php可控制概率
 
 33531  304

ichartjs-基于html5的图表组件

ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案 。如果你正在开发HTML5的应用,ichartjs正好适合您。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。
 
 49689  356

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复