Webflow网站滚动入视口触发Typed.js打字脚本的实现咨询

核心实现逻辑 #

放弃页面加载完成就直接实例化Typed的写法，改用浏览器原生的Intersection Observer API判断元素是否进入视口，对应元素滚动到可见区域时，再初始化该区块的Typed实例，触发打字效果，触发完成后终止观察，避免重复执行。

操作步骤 #

• 清理原有自动执行的脚本
  删掉当前页面中直接写new Typed(...)的代码段，这类代码会在DOM加载完成后立刻执行，不符合滚动触发的要求。
• 给目标元素加统一识别类
  在Webflow的元素设置面板中，给每个需要实现打字效果的文本块（比如原来绑定.typed-text2的元素），额外添加一个类名：js-typed-target，方便脚本批量识别需要触发的元素。
• 粘贴通用触发脚本
  将下面的代码放到Webflow对应页面的底部自定义代码区（页面设置 -> 自定义代码 -> </body>标签内的代码输入框），代码已经适配你当前使用的Typed.js配置，多区块场景直接在配置映射里追加对应规则即可：

// 定义每个打字元素的对应配置，类名和Webflow里的元素类一一对应
const typedConfigMap = {
  '.typed-text2': {
    strings: ['Unser Angebot'],
    typeSpeed: 75,
    backSpeed: 25,
    bindInputFocusEvents: true,
    loop: false,
    cursorChar: '',
    backDelay: 1000,
    startDelay: 0 // 滚动触发场景下可取消原加载延迟，进视口直接启动
  }
  // 后续其他区块的打字效果直接在此追加规则，例：
  // '.typed-text3': { 配置项和Typed.js原生参数保持一致 }
}

// 初始化滚动观察器
const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    // 判断元素是否进入可视区域
    if (entry.isIntersecting) {
      const targetEl = entry.target;
      // 匹配当前元素对应的Typed配置
      const matchedSelector = Object.keys(typedConfigMap).find(selector => targetEl.matches(selector));
      if (matchedSelector) {
        // 实例化Typed启动打字效果
        new Typed(targetEl, typedConfigMap[matchedSelector]);
        // 启动后移除该元素的观察，避免滚动往返时重复触发
        obs.unobserve(targetEl);
      }
    }
  })
}, {
  threshold: 0.3 // 元素露出30%时触发，可按需调整0-1区间的数值
})

// 给所有带触发类的元素绑定滚动观察
document.querySelectorAll('.js-typed-target').forEach(el => {
  observer.observe(el)
})

常见注意事项 #

• 每个需要打字的元素必须同时携带：业务类（如.typed-text2）、触发识别类js-typed-target，漏加触发类会导致脚本无法捕获元素
• Typed所有原生参数（打字速度、循环模式、光标样式等）完全兼容，直接在配置映射中修改对应值即可，无需额外适配
• 触发一次后代码会自动取消观察，不需要额外增加重复执行的判断逻辑
• 响应式场景下Intersection Observer为浏览器原生能力，和Webflow平台无兼容问题

内容的提问来源于stack exchange，提问作者Fabian Luginbühl