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

Streaksで特定の曜日をスキップ継続日数をカウントできるiPhoneアプリ「Streaks」で特定の曜日をスキップさせるやり方前のページ

KindleでiPhoneからEメールでコンテンツを送れるようにメールアドレスを追加するやり方次のページKindleでEメールアドレスを追加

関連記事

  1. Owl Carousel

    JavaScript

    タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carou…

    素晴らしいカルーセルを実装できるjQueryプラグインがあったのでご紹…

  2. no-image

    JavaScript

    スタイリッシュなスライダーを実装できるjQueryプラグイン「bsc-slider」

    bsc-sliderは、シンプルでスタイリッシュなスライダーを実装する…

  3. JavaScript

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラグイン「SHARDS」

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラ…

  4. Rate Yo!

    JavaScript

    星評価(レーティング)を簡単に実装できるjQueryプラグイン「Rate Yo!」

    Rate Yo!というjQueryプラグインを使えば、SVGを使った星…

  5. Dependent / Cascading Select List with jQuery Select2

    JavaScript

    選択内容によりその下の内容も変化するセレクトボックス「Dependent / Cascading S…

    セレクトボックスを強力でカスタマイズ性が高く、そして充実させる人気のj…

  6. Sticky Multi Header Scroll

コメント

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

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

最近の記事

  1. 蒼龍唐玉堂 特製牛バラ担々麺
  2. サーモンアボカドサラダラップとドリップ
  3. 猿田彦フレンチ
  4. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  5. ビジネスホテル

アーカイブ

PAGE TOP