jLetter

JavaScript

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

シンプルでちょっと目を引かせたいところなんかによさそうだったので使ってみました。テキストをフェードインで表示させて、散らばせながらフェードアウトしていくお洒落な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の使い方についてでした。

関連記事

  1. SweetModal

    JavaScript

    シンプルでエレガントなモーダルウィンドウを実装できる「SweetModal」

    SweetModalは、アラートやダイアログなどをシンプルでエレガント…

  2. JavaScript

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

  3. Naver

    JavaScript

    シンプルですごくいい!レスポンシブに合うナビゲーションのjQueryプラグイン「Naver」

    NaverというjQueryプラグインがすごくシンプルでよかったのでご…

  4. bcralnit.js
  5. Folder Preview Ideas

    JavaScript

    フォルダに楽しいホバーアニメーションをつける「Folder Preview Ideas」

    Folder Preview Ideasは、フォルダにさまざまな楽しい…

  6. mFancyTitle

    JavaScript

    ブラウザのタブにあるファビコンとタイトルをアニメーション化できる「mFancyTitle」

    mFancyTitleは、ブラウザのタブに表示されているファビコンとタ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP