滚动页面时的打字效果

【问题标题】：Typing effect when scrolling page滚动页面时的打字效果
【发布时间】：2018-08-05 05:02:54
【问题描述】：

如何在页面向下滚动时制作打字效果？我使用此代码开始输入：

var typed = new Typed(".class", {
  strings: ["My text."],
  typeSpeed: 40,
});

【问题讨论】：

你的意思是应该修复有输入文本的容器吗？

标签： javascript jquery scroll vertical-scrolling typing

【解决方案1】：

考虑到您需要检测向下滚动事件才能开始输入。您可以在代码中包含shabdawali js 库和detect for scroll down event 来播放暂停输入效果。

var typeWriter = shabdawali(el, {
    lines : ["sentence 1", "sentence 2"],
});

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
       typeWriter.start();
   } else {
      // upscroll code
      typeWriter.pause();
   }
   lastScrollTop = st;
});

免责声明：我是这个插件的作者。

【讨论】：