スクリプトをループする

Question

実際にクールなスクリプトTyperを使用して、タイプライターエフェクトをシミュレートしますが、終了するとアニメーションをループするメソッドには含まれていません。 誰でも方法を知ることができますか？

typer('#rotating') 
.cursor({block:true,blink:'hard',color:'#EB312A'}) 
.line('some line') 
.pause(5000) 
.back('all') 
.continue('Other line'); 

Answer 1

あなたはこのようなsetInterval使用することができます：10000は、関数に渡された二コール間のミリ秒数である（もちろん、あなたが時間に応じて指定する必要があります

setInterval(function(){ 
    typer('#rotating') 
    .cursor({block:true,blink:'hard',color:'#EB312A'}) 
    .line('some line') 
    .pause(5000) 
    .back('all') 
    .continue('Other line'); 
}, 10000); 

をあなたのアニメーションの）。 setIntervalは、関数を定期的に呼び出すことができるネイティブ関数です。これはあなたを助けることを望ん

;）

EDIT

それが開始されたときタイパーがあなたのターゲット#rotating内に新しいdiv要素を作成します。 これを繰り返して複数回起動すると、重複したコンテンツが取得されます。それを防ぐために、ちょうどこのように、タイパーを再起動する前に、ターゲットのdivの内容を消去：

setInterval(function(){ 
    document.querySelector('#rotating').innerHTML = null; //This clears the content of rotating. 
    typer('#rotating') 
    .cursor({block:true,blink:'hard',color:'#EB312A'}) 
    .line('some line') 
    .pause(5000) 
    .back('all') 
    .continue('Other line'); 
}, 10000); 

EDIT 2

はそれを直接起動するようにするには、シンプル十分：

var startTyper = function(){ 
    document.querySelector('#rotating').innerHTML = null; //This clears the content of rotating. 
    typer('#rotating') 
    .cursor({block:true,blink:'hard',color:'#EB312A'}) 
    .line('some line') 
    .pause(5000) 
    .back('all') 
    .continue('Other line'); 
}; 
startTyper(); 
setInterval(startTyper, 10000); 

あなたに残された唯一のことは、あなたのアニメーションの期間に10000を調整することです！