効率的な無限ループのテキストアニメーションを作成するにはどうすればよいですか？

Question

これは私が（JSFiddle）を作成しようとしている効果である：

$('.header h1 span').each(function() { // each letter is contained inside a <span> element 
    var that = $(this); 
    setTimeout(function() { 
     that.animate({ 
       top: "-10px" 
      }, animateTime/2) 
      .animate({ 
       top: "10px" 
      }, animateTime/2); 
    }, that.index() * 100); 
}); 

結果：

成功したように見えます。しかし、私は戻ってきて、その後、タブを切り替えた後、このように見ていることの問題に遭遇した：上記のフィドルで

を、私は時にアニメーションを停止させることによって、これを「修正」しようとしましたタブにはピントがありません。それは私がタブの焦点が合っていないかチェックしていないときよりも優れていますが、まだ問題があります。これは私がそれを行うために使用しているコードです：ユーザーがタブからピントの合っていないカップル秒未満費やし

var running = true; 

document.addEventListener('visibilitychange', function(){ 
    console.log("Running:" + running); 
    running = !document.hidden; 
    if(!running) clearQueues(); 
}) 

場合は、アニメーションが再び二GIFのように見える、と私は道が表示されませんそれを避けるために。私はrequestAnimationFrame()を使ってみましたが、正しく動作させる方法を理解できません。

私の質問は次のとおりです。どのようにして、タブの焦点が合っていない状態でアニメーションが影響を受けないようにしますか？

モバイルでも効率的に使用できるように助けてくれたら、（比喩的に）ボーナスポイント。

Answer 1

これがあなたのために吃音を解決するかどうかはわかりません。この戦略は、あなたがやっていることと概念は似ていますが、jsではなくCSSアニメーションを使用します。

(function(){ 
 
    
 
    var el = document.querySelectorAll(".wavey")[0]; 
 
    var oldText = el.innerText 
 
    var newHtml = ""; 
 
    for (var i in el.innerText) { newHtml += ("<span style='animation-delay: " + i/10 + "s;'>" + oldText[i] + "</span>"); } 
 
    el.innerHTML = newHtml; 
 
    
 
})();

@keyframes wave { 
 
    from { transform: translateY(0); } 
 
    to { transform: translateY(-1em); } 
 
} 
 

 
h1.wavey { margin-top: 2em; } 
 

 
h1.wavey span { 
 
    display: inline-block; 
 
    animation-duration: 1s; 
 
    animation-name: wave; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
    animation-timing-function: ease-in-out; 
 
}

<h1 class="wavey">Hello World</h1>