Typed.js 一款有意思的网页打字机效果库

博客页面不仅需要简介大方漂亮美观，还需要一些动态的效果，如果引入动态的GIF图片其大小会影响页面的加载速度，这里推荐一个JavaScript的打字机效果库Typed.js，其漂亮的打字机效果和简单的使用方法，值得博主拥有。

安装

CDN

<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>

NPM

npm install typed.js

Yarn

yarn add typed.js

使用方法

引入cdn之后，创建一个DOM用来展示文字，在JavaScript中可以设置打字机的效果参数。

<!-- Element to contain animated typing -->
<span id="element"></span>
<!-- Setup and start animation! -->
<script>
    var typed = new Typed('#element', {
    strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
    typeSpeed: 50,
    });
</script>

在这个页面的最底部，可以看到我添加的打字机效果，我的配置参数如下：

  <script>
        const typed = new Typed('#typed', {
        strings: ['这里是你要输出的文字','hello world'
        ],
        typeSpeed: 250,
        backSpeed: 100,
        backDelay: 100,
        startDelay: 1000,
        loop:true
    });
  </script>

具体的参数，这里就不在介绍了，大家可以查看官方的文档是实例，自己手动改改就能了解这些参数的含义了。

相关网址

Typed.js DEMO

Typed.js DOC