能否为特定文本及Typed.js中strings指定元素调整打字动画速度？

问题解答 #

• 完全可以为特定文本单独调整打字速度，也能针对strings数组中索引为1的元素修改打字动画效果。Typed.js支持为每个字符串配置独立参数，无需全局统一设置。

修改后的代码示例 #

JavaScript代码 #

document.querySelectorAll('.home-name-text').forEach(function(el) {
  new Typed(el, {
    // 将字符串改为对象形式，为每个字符串配置独立参数
    strings: [
      'Ricko Wijaya,', // 沿用全局默认参数
      {
        string: 'an aspiring developer!',
        typeSpeed: 50, // 自定义该文本的打字速度（比全局慢）
        backSpeed: 120, // 自定义该文本的回退速度（比全局快）
        backDelay: 2000 // 自定义回退前的延迟时间
      }
    ],
    loop: true,
    typeSpeed: 100, // 全局默认打字速度
    backSpeed: 80, // 全局默认回退速度
    startDelay: 100,
    backDelay: 1500,
  })
})

HTML代码（无需修改） #

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<span class="home-name-text"></span>

关键说明 #

• 当strings数组中的元素为对象时，该对象的参数会覆盖全局配置，实现单个文本的个性化动画效果。
• 可自定义的参数包括但不限于typeSpeed（打字速度）、backSpeed（回退速度）、backDelay（回退延迟）、startDelay（开始延迟）等。
• 如果某个字符串不需要自定义参数，直接使用字符串形式即可，会自动继承全局配置。

内容的提问来源于stack exchange，提问作者Kuncung