js：使用typed.js实现打字动画效果

news2024/10/7 12:22:01

效果预览
在这里插入图片描述

实现方式一: 原生JS实现

<div id="code">
我感到未尝经验的无聊，是自此以后的事。我当初是不知其所以然的；
后来想，凡有一人的主张，得了赞和，是促其前进的，得了反对，是促其奋斗的，独有叫喊于生人中，
而生人并无反应，既非赞同，也无反对，如置身毫无边际的荒原，无可措手的了，这是怎样的悲哀呵，
我于是以我所感到者为寂寞。这寂寞又一天一天地长大起来，如大毒蛇，缠住了我的灵魂了。
</div>

<script>
  Element.prototype.typewriter = function (a) {
    var d = this,
      c = d.innerHTML,
      b = 0
    d.innerHTML = ''
    var e = setInterval(function () {
      b++
      d.innerHTML = c.substring(0, b) + (b & 1 ? '|' : '') //&1 这个表达式 可以用来 判断 a的奇偶性
      if (b >= c.length) {
        clearInterval(e)
      }
    }, 150)
    return this
  }
  document.getElementById('code').typewriter()
</script>

实现方式二：typed.js实现

A JavaScript Typing Animation Library

译文：JavaScript打字动画库

相关资料

文档 https://mattboldt.github.io/typed.js/docs/
文档 https://mattboldt.github.io/typed.js/
案例 http://cheng.lolku.cn/html/typed.html
案例 https://mattboldt.com/demos/typed-js/
github https://github.com/mattboldt/typed.js
vue-typed-js https://www.npmjs.com/package/vue-typed-js

使用示例

1、CDN

  <!-- Element to contain animated typing -->
  <span id="element"></span>

  <!-- Load library from the CDN -->
  <script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>

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

2、ESM

安装

npm install typed.js

示例

import Typed from 'typed.js';

const typed = new Typed('#element', {
  strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
  typeSpeed: 50,
});