人が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>

を