使用typed.js实现打印效果

Type.js是一个轻量级的插件, 用于实现页面文字的打字机效果. 它使用起来非常简单, 只需要几行代码就能实现高大上的打字机效果。本文介绍一个最简单的使用方法

直接上一段代码：

<span id="typed-text"></span>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
<script>
   var boxObj3 = document.getElementById('typed-text');
   new Typed(boxObj3,{
      strings: ['使用typed.js实现打印效果','欢迎光临肉松的站','https://www.rousongs.com'],
      typeSpeed: 100,      //间隔时间
      startDelay: 100,     //打印完停留时间
      loop: true,
      loopCount: Infinity,
      cursorChar: '#'      // 自定义光标
   });
</script>

下面展示一下效果（无显示请按F5刷新页面）：

肉松的站其他两个打印效果：

使用typed.js是相对比较方便和稳定的方法，以上两个在本站的pjax框架下都存在刷新页面后打印速度变快的现象。

CDN加速连接：https://www.bootcdn.cn/typed.js/，可以根据需要自行选择版本。

目前typed.js的2.0.12版本链接：

https://cdn.bootcdn.net/ajax/libs/typed.js/2.0.12/typed.js
https://cdn.bootcdn.net/ajax/libs/typed.js/2.0.12/typed.min.js

使用typed.js实现打印效果

评论(0)