Shuffle Letters

JavaScript

テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグイン「Shuffle Letters」

テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグイン「Shuffle Letters」をご紹介します。カシャカシャカシャカシャ楽しいですね。注目させたい文字がある場合なんかに活用できそうです。ということで、以下、使い方です。

[ads_center]

使い方

head内にjQueryとダウンロードしたプラグインファイルを読み込み、shuffleLettersをセットします。

<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="js/jquery.shuffleLetters.js"></script>
<script type="text/javascript">
$(function() {
    $('#container').shuffleLetters();
});
</script>

で、あとは表示させたいテキストを記述します。

<div id="container">Shuffle Lettersのサンプルです!</div>

これだけでテキストがシャッフルします。めっちゃ簡単ですね。

2回目、3回目と表示させたいテキストがある場合には、head内にscript.jsも読み込みます。

<script type="text/javascript" src="js/script.js"></script>

で、script.js内にあるsetTimeoutの場所に表示させたいテキストを指定していきます。このように、追加していくテキストがある度に、setTimeoutのブロックを作っていきます。ちなみにsetTimeoutには時間を指定する必要があります。

例えば、2回目のテキストはsetTimeoutを4000、3回目のsetTimeoutは8000と指定したい場合には、以下のように記述していきます。

     // 2回目のテキスト
     setTimeout(function(){
          // Shuffle the container with custom text
          container.shuffleLetters({
               "text": "2回目に表示させるテキスト"
          });
          userText.val("type anything and hit return..").fadeIn();
     },4000);

     // 3回目のテキスト
     setTimeout(function(){
          // Shuffle the container with custom text
          container.shuffleLetters({
               "text": "3回目に表示させるテキスト"
          });
          userText.val("type anything and hit return..").fadeIn();
     },8000);

テキストにちょっとしたアクセントをつけたい場合にはオススメです。画像と組み合わせたりなんかしても面白そうですね。以下からダウンロードすることができます。

関連記事

  1. no-image

    JavaScript

    軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」

    Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラ…

  2. Morphext

    JavaScript

    複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

    MorphextというjQueryプラグインを使えば、複数テキストをア…

  3. jQuery RS Carousel

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できる「jQuery RS Carousel」

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイ…

  4. jQuery Seat Charts
  5. Tosrus

    JavaScript

    スマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」

    TosrusというjQueryプラグインを使えば、スワイプやスクロール…

  6. Tag-it

    JavaScript

    サジェスト機能を搭載したタグ編集ウィジェット「Tag-it」

    Tag-itはサジェスト機能を搭載したjQuery UIプラグインによ…

コメント

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

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

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP