Typed.js打字效果js库的几种应用方式（1）

之前我们分享过一个有趣而简单的动态打印字体插件——typed.js

关于typed.js，可以了解这篇文章

一个有趣而简单的动态打印字体插件——typed.js

这里我们会陆续给给大家说一下，Typed.js的几种实际应用方法，多掌握一些简单的前端技巧

1.基础应用，在静态HTML中使用（对 SEO 友好）

您可以在页面上放置一个html的div并从中读取，而不是使用strings数组插入字符串。这允许搜索引擎的爬虫和禁用 JavaScript 的用户在页面上看到您的文本。

例如：

<script>
  var typed = new Typed('#typed', {
    stringsElement: '#typed-strings'
    typeSpeed: 0,
    backSpeed: 0,
    backDelay: 500,
    startDelay: 1000,
    loop: false,
  });
</script>

其中参数如下，我可以通过调整各参数，差异打字效果：

typeSpeed: 输入字符速度,

backSpeed: 删除字符速度,

backDelay: 输入延迟,

startDelay: 开始延迟,

loop: 是否循环,

HTML代码如下

<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>