如何触发键入动画当一个人在JQuery中滚动超过某个点时

Question

我已经在jquery中编写了一个代码，当用户滚动到某个点以上时，文本被输出。但是，如果用户停止滚动，即使动画不完整，动画也会停止。我如何防止这种情况发生？

$(document).scroll(function() { 
    if ($('body').scrollTop() > $('.sec1').offset().top - 100) { 
     set(); 
    } 
}); 

function set() { 
    heading1 = 'Gaming Redefined.' 
    type(); 
} 

function type() { 
    $('.heading1').html(heading1.substr(0,len++)); 

} 

Answer 1

有一个叫typed.js我强烈推荐一个很酷的插件：使用https://github.com/mattboldt/typed.js/

该插件，你可以做这样的事情：

var typing = false; 
 
$(window).scroll(function() { 
 
    if ($(window).scrollTop() > 10 && typing == false) { 
 
    typing = true; 
 
    typeIt("This is some funky typed text."); 
 
    } 
 
}); 
 

 
function typeIt(text) { 
 
    $("#typed_output").typed({ 
 
    strings: [text], 
 
    typeSpeed: 25, 
 
    startDelay: 400, 
 
    showCursor: false, 
 
    // backDelay: 750, // pause before backspacing 
 
    loop: false, // loop on or off (true or false) 
 
    loopCount: false, // number of loops, false = infinite 
 
    callback: function() {} 
 
     // call function after typing is done. You can use this to set the typing variable to false if you wanted so that your text types again. 
 
     // callback: function(){typing = false; } 
 
    }); 
 
}

.container { 
 
    height: 300px; 
 
    background: #333; 
 
} 
 
#typed_output { 
 
    padding: 200px 0 100px 50px; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.4/typed.min.js"></script> 
 

 
<div class="container"> 
 
    <h1 id="typed_output"></h1> 
 
</div>