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

作者:J.sky · 发表于:
2023-07-05T08:39:51.000000Z
· 更新于:
2023-08-13T22:54:57.632618Z
· Tag: Typed

博客页面不仅需要简介大方漂亮美观,还需要一些动态的效果,如果引入动态的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