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. jquery.confirm

    JavaScript

    jQueryとBootstrapを使ったボタンとリンクによるダイアログ実装「jquery.confi…

    jquery.confirmは、ページ内のボタンやリンクをクリックする…

  2. hummingbird-popover

    JavaScript

    高速・軽量なコンテキストメニュー実装「hummingbird-popover」

    hummingbird-popoverは高速・軽量なコンテキストメニュ…

  3. NO IMAGE
  4. stackgrid.adem.js

    JavaScript

    コンテンツをグリッド状にスタッキングできる「stackgrid.adem.js」

    stackgrid.adem.jsはコンテンツをグリッド状にスタッキン…

  5. JavaScript

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラグイン「mlens」

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラ…

  6. JavaScript

    値を指定することで好きなカラースウォッチを表示できるjQueryプラグイン「Color Swatch…

    これはどこかで使いたくなるjQueryプラグインですね。カラー値を指定…

コメント

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

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

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP