javascript - HTML5 単語スワップ アニメーション

Question

単語の配列を使用して、「このサイトはクールです」の形容詞を交換したい[awesome, fun, useful, beautiful]。1 つのフレームで入れ替えるだけではなく、適切なトランジションも実現したいと考えています。おそらく、新しい単語が上からスライドインするか、ズームアウトして古い単語を置き換えることができます. どうすれば実装できますか? ジャバスクリプト？CSS3? ありがとう。

Answer 1

フェードインのような jQuery-Effects を使用できます。

HTML:

<div>This site is <div id="adjDiv" style="display:none"></div>.</div>

JavaScript

var adjPool = ["awesome", "fun", "useful", "beautiful"];
var adj = adjPool[Math.round(Math.random() * (adj.length-1))];
$("#adjDiv").text(adj);
$("#adjDiv").fadeIn();