Typed.js实现打字机特效插件

Typed.js实现打字机特效插件

2020-05-27

209

GitHub

Type.js是一个轻量级JavaScript打字动画插件, 用于实现页面文字的打字机效果。

它使用起来非常简单, 只需要几行代码就能实现酷打字机效果。

CDN引用

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>

模板截图

 <span class="element"></span> //目标容器
 <script>
var options = {
    strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
     typeSpeed: 100, //打字速度
     backSpeed: 50 //回退速度
};
var typed = new Typed('.element', options);
</script>

strings可以div在页面上放置HTML 并从中读取内容,而不是使用数组插入字符串。这样,机器人和搜索引擎以及禁用JavaScript的用户就可以在页面上看到您的文字。代码如下:

<div id="typed-strings">
  <p>Typed.js is a <strong>JavaScript</strong> library.</p>
  <p>It <em>types</em> out sentences.</p>
</div>
<span id="typed"></span>
<script>
  var typed = new Typed('#typed', {
    stringsElement: '#typed-strings'
  });
</script>


1. 本站所有资源来源于网络和用户上传!如有侵权请邮件联系客服!sys(at)hoohtml.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!
3. 本由本站提供的程序对您的网站或计算机造成严重后果的本站概不负责。