jQueryを使ったテキストアニメーション

Question

平均的な "Boom Booom Bap、silence"ビートのように、リズムに沿ってユーザーに複数の単語を表示しようとしています。

jQueryでこれを実現するにはどうすればいいですか？

私は無地のリズムを持っている非常にラメコードを思い付いた、と言葉分割/（沈黙）パーツを作成する方法がわからない：

jQuery(document).ready(function() { \t \t 
 
\t \t \t \t 
 
\t var textlist = ["Boom","Booom", "Bap", "Hey","Yoh", "Aha", "Namean","Brooklyn", "Pizza"]; 
 
\t 
 
\t var timer; 
 
\t function textFade(index){ 
 
\t \t $("#container").html(textlist[index]).fadeIn(200); 
 
\t \t index++; 
 
\t \t timer = setTimeout(function() { 
 
\t \t \t textFade(index % textlist.length); 
 
\t \t }, 1500); 
 
\t } 
 
\t \t \t 
 
\t 
 
\t textFade(0); 
 
\t 
 
\t 
 
});

body{font-size: 90px;} 
 
#container{ 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
width: 100%; 
 
height: 100%; 
 
background: #eee; 
 
font-family: 36px; 
 
color: #333; 
 
text-align: center; 
 
display: none; 
 
padding-top: 20px; 
 
font-family: Arial; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="container"></div>

どれをヘルプは非常に高く評価されています！

Answer 1

条件付きでタイムアウトを設定すると、これを行うことができます。

timer = setTimeout(function() { 
     textFade(index % textlist.length); 
    }, (index%3==0)?2000:700); 

Answer 2

Prome Nabidのように、最も簡単な解決策は、ギャップを空の文字列要素で埋めることです。

逆に、より速い拍子のテキストのために、より多くの単語を要素に配置することもできます。

jQuery(document).ready(function() { \t \t 
 
\t \t \t \t 
 
\t var textlist = ["Boom","Booom", "Bap", "", "", "", "Hey","Yoh", "The sound of my", "heart", "Namean","Brooklyn", "Pizza", ""]; 
 
\t 
 
\t var timer; 
 
\t function textFade(index){ 
 
\t \t $("#container").html(textlist[index]).fadeIn(200); 
 
\t \t index++; 
 
\t \t timer = setTimeout(function() { 
 
\t \t \t textFade(index % textlist.length); 
 
\t \t }, 1500); 
 
\t } 
 
\t \t \t 
 
\t 
 
\t textFade(0); 
 
\t 
 
\t 
 
});

body{font-size: 90px;} 
 
#container{ 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
width: 100%; 
 
height: 100%; 
 
background: #eee; 
 
font-family: 36px; 
 
color: #333; 
 
text-align: center; 
 
display: none; 
 
padding-top: 20px; 
 
font-family: Arial; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="container"></div>

はまた、あなたのループで1「ビート」よりもその言葉長く持続する単語と空の文字列を置き換えることができます。

Answer 3

これを試してみてください：空の文字列を使用して

$(document).ready(function() { 
 
     
 
    var textlist = ["Boom","Booom", "Bap","","Hey","Yoh", "Aha", "Namean","Brooklyn", "Pizza"]; 
 
     
 
    var timer; 
 
     
 
    function textFade(index){ 
 
     $("#container").html(textlist[index]).fadeIn(200); 
 
     index++; 
 
     timer = setTimeout(function() { 
 
      textFade(index % textlist.length); 
 
      }, (index===4) ? 4500 : 1500); 
 
    } 
 
\t \t \t 
 
\t textFade(0); 
 

 
})

body { 
 
    font-size: 90px; 
 
} 
 
#container{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #eee; 
 
    font-family: 36px; 
 
    color: #333; 
 
    text-align: center; 
 
    display: none; 
 
    padding-top: 20px; 
 
    font-family: Arial; 
 
}

<div id="container"></div> 
 
     
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>