手軽にテキストをシャッフル演出できるjQueryプラグイン「jQuery Shuffle Effect」

私のポートフォリオサイト「KATOSHUN.com」のオープニングで、テキストのシャッフル演出用に作ったjQueryプラグインを公開します。
３年くらい前にベースとなるJavaScriptを作ったのですが、KATOSHUN.comのリニューアルにあたって、jQueryプラグインに書き換えたものです。

実は作ってから他にも似たようなプラグインがいくつかあることを知りました…orz
でもシンプルでわかりやすいから使ってくれる人もいるだろうと思い込むことにして、公開に踏み切りたいと思います。

デモ

簡単にテキストにこんな効果を加えることができます。（「デモ」のボタンを押してみてください）

デモ

使い方

まずは「jQuery.shuffleeffect.js」をダウンロードし、HTMLに読み込ませます。

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

HTMLにこんなコードを書いたとします。

<p id="text">寿限無寿限無 五劫の擦り切れ</p>

「寿限無寿限無 五劫の擦り切れ」にエフェクトをかける場合、JavaScriptにこう書けばOK。

$("#text").shuffleEffect(30);

「(30)」の数字は、テキストをシャッフルするスピードになります。デフォルトは「50」です。
セレクタはidでもclassでもOK。

以下のようにCSSでテキストを非表示にしておけば、表示させながらシャッフルしてくれます。

#text {
	display: none;
}

ちなみにソースはとってもシンプル。
こんな感じ。

jQuery.fn.extend({

	shuffleEffect: function(duration) {

		if(duration == null) duration = 50;
		var arrLetter = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
		var $this = jQuery(this);
		var strDefault = $this.text();
		var nLength = strDefault.length - 1;
		var i = 0;
		var strText = "";
		var tid = setInterval(function() {
			if(i < nLength+1){
				var strShuffle = "";
				for(var j=0; j<nLength-i; j++){
					strShuffle += arrLetter[Math.floor(Math.random() * arrLetter.length)];
				}
				strText += strDefault.charAt(i);
				$this.css({display:"block"}).text(strText + strShuffle);
				i++;
			} else {
				clearInterval(tid);
			}
		}, duration);

	}

});

arrLetterの中身を書き換えれば、シャッフルの際に表示される文字を変えることができます。

ダウンロード

以下のボタンクリックするとダウンロードできます。ご自由にご利用ください。

ダウンロード