テキストを散らばせながら次々と表示させることができるjQueryプラグイン「jLetter」

jLetter

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

使い方

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の使い方についてでした。

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives