フェードやスライドといった様々なエフェクトをテキストに与えながら切り替わっていくjQueryプラグイン「Textualizer」を使ってみました。とても滑らかで動きがおもしろいので、テキストに集中しちゃいますね。注目させたいテキストなどがあれば効果的かと思います。以下、使い方です。
[ads_center]
使い方
head内にjQueryとダウンロードしたプラグインを読み込みます。
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script> <script type="text/javascript" src="textualizer.js"></script>
次に、オプションや目的のテキストを記述していき、Textualizerをセットしていきます。
<script type="text/javascript">
$(function() {
var list = ['サンプル01', 'サンプル02', 'サンプル03']; // 目的のテキストを指定
var txt = $('#sample'); // id名を指定
var options = {
duration: 1000,
rearrangeDuration: 1000,
effect: 'random',
centered: true
}
txt.textualizer(list, options);
txt.textualizer('start');
});
</script>
そして、指定したid名を表示させたい場所に記述していきます。
<!-- Textualizerを表示 --> <div id="sample"></div>
ちなみに、指定したidにはwidthとheightを設定しないと動かなかったので、CSSで設定しておくといいかと思います。
ということで、Textualizerの使い方についてでした。
ダウンロードは以下からどうぞ。
