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. BetterToggle

    JavaScript

    要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」…

    面白いjQueryプラグインがあったのでご紹介します。指定した要素を拡…

  2. jquery.inputmask

    JavaScript

    テキスト入力のマスク(入力補助)を作成する「jquery.inputmask」

    jquery.inputmaskは、ウェブページでのテキスト入力のマス…

  3. Parallaxor

    JavaScript

    美しいパララックス効果を最小限のコードで実装できるjQueryプラグイン「Parallaxor」

    Parallaxorは最小限のミニマルなコードで美しいパララックス効果…

  4. jQuery Page

    JavaScript

    モバイルに最適なスライドやフリップを実装できる「jQuery Page」

    jQuery Pageは、スマホなどモバイルに最適なスライドやフリップ…

  5. no-image

    JavaScript

    シンプルなモバイルメニューを実装できる「offcanvas-mobile-menu」

    offcanvas-mobile-menuは、シンプルでモバイルフレン…

  6. Fancy Input

    JavaScript

    かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

    Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実…

コメント

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

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

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP