bl6.jp

シンプルでちょっと目を引かせたいところなんかによさそうだったので使ってみました。テキストをフェードインで表示させて、散らばせながらフェードアウトしていくお洒落なjQueryプラグイン「jLetter」です。複数のテキストを記述しておくと次々と表示していきます。個人的には人気のカテゴリーやタグなんかをこれで表示させたら面白いんじゃないかなと思います。以下、使い方です。

[ads_center]

使い方

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="jquery.jletter.0.1.js"></script>

で、jLetterをセットします。

<script type="text/javascript" language="javascript">
$("document").ready(function(){
    $("#demo").jLetter({
        pause: 3000,
        rotateSpeed: 2500,
        fadeSpeed: 1000
    });
});
</script>

次にHTMLで表示させるテキストを記述していきます。

<div id="demo">
    <div>
        <div class="slide"><p>サンプル01</p></div>
        <div class="slide"><p>サンプル02</p></div>
        <div class="slide"><p>サンプル03</p></div>
        ・・・略・・・
    </div>
</div>

これだけでOKです。簡単でいいですね。

オプション

オプションではテキストが表示されている時間やフェードイン・フェードアウト時の速さなどを設定することができます。

pause

テキストが表示されてから止まっている時間

rotateSpeed

フェードアウトしていく時の速さ

fadeSpeed

フェードインしてくる時の速さ

ということで、以上、jLetterの使い方についてでした。

jQuery text rotator plugin – jLetter