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. no-image

    JavaScript

    シンプルな円形のカラーピッカーを実装できる「jQuery-Colorwheel」

    jQuery-Colorwheelはシンプルな円形によるカラーピッカー…

  2. jQuery Elastic Grid
  3. animateClick

    JavaScript

    ボタンクリック時にアニメーションをつけれる「animateClick」

    animateClickはボタンをクリックしたときにアニメーションをつ…

  4. jQuery Waterwheel Carousel

    JavaScript

    水平や垂直方向に配置できる水車のような便利なカルーセル「jQuery Waterwheel Caro…

    水平方向や垂直方向に配置できる水車のような便利なカルーセル「jQuer…

  5. JavaScript

    jQueryの基本的なセレクターを適当に試してみる

    自分の勉強用としてちょっと適当に試してみました。jQueryの基本のセ…

  6. scrollMonitor

    JavaScript

    要素が表示領域に入ったり出たりするとイベントを受け取れる「scrollMonitor」

    scrollMonitorは、要素が表示領域(ビューポート)に入ったり…

コメント

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

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

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP