打字机效果 | 使用type.js模拟打字输入回退效果

今天在Github上发现了一个有趣的开源项目

• github地址：https://github.com/mattboldt/typed.js/
• 文档：https://mattboldt.github.io/typed.js/docs/

导入js

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

实现效果

try {
  var typed = new Typed("#typed", {
  strings: ['醒亦念卿，梦亦念卿','频繁记录，只因生活和你太值得❤'],//字符串
  startDelay: 0,//开始的延迟
  typeSpeed: 200,//打字速度
  backSpeed: 100,//回退速度
  loop: true,//是否循环
  showCursor: true,//显示游标
  shuffle: false//是否随机
  });
} catch (err) {
}

游标样式

try {
  var typed1 = new Typed("#typed1", {
  //一大堆同上
  cursorChar: '_',//游标样式
  });
} catch (err) {
}

批量输入

try {
  var typed2 = new Typed("#typed2", {
  strings: ['醒亦念卿，梦亦念卿\n `频繁记录，只因生活和你太值得❤`'],//字符串
  //一大堆同上
  });
} catch (err) {
}

智能退格

<div style="text-align:center;font-size:2rem;">
<strong id="typed3"></strong>

</div>
<script data-pjax>
  try {
    var typed3 = new Typed("#typed3", {
    strings: ['我想说：我','我想说：爱','我想说：你'],//字符串
    startDelay: 0,//开始的延迟
    typeSpeed: 200,//打字速度
    backSpeed: 100,//回退速度
    loop: true,//是否循环
    showCursor: true,//显示游标
    smartBackspace: true, //默认true
    });
  } catch (err) {
  }
</script>