2012年3月1日

カテゴリ：　Web制作

テキストをシャッフルしながら表示するjQueryプラグインを試してみた。

• Tweet
• 

気になっていたjQueryプラグインを試してみました。
試したのは下記のプラグインで、テキストがランダムにシャッフルしながら表示されていきます。

Shuffle Letters Effect: a jQuery Plugin

ダウンロードしたファイルを元にデモサイトも作ってみました。
IEでは動かないので独自のメッセージを込めました。

デモサイト

以下、カスタマイズのメモになります。
まずはjquery.shuffleLetters.jsの最初のほうを見ていきます。

(function($){

	$.fn.shuffleLetters = function(prop){

		var options = $.extend({
			"step"		: 8,			// How many times should the letters be changed
			"fps"		: 10,			// Frames Per Second
			"text"		: "", 			// Use this text instead of the contents
			"callback"	: function(){}	// Run once the animation is complete
		},prop)

この後にもまだ同じ関数の記述がずーっと続きますが、まずはここでテキストシャッフルのスピードや回数を調整しています。

そして同ファイルの最後にあるrandomChar()でシャッフルに使うテキストを設定しています。

	function randomChar(type){
		var pool = "";

		if (type == "lowerLetter"){
			pool = "abcdefghijklmnopqrstuvwxyz0123456789";
		}
		else if (type == "upperLetter"){
			pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
		}
		else if (type == "symbol"){
			pool = ",.?/\\(^)![]{}*&^%$#'\"";
		}

		var arr = pool.split('');
		return arr[Math.floor(Math.random()*arr.length)];
	}

script.jsではまず変数の宣言をします。この変数hHTML内のid要素に対応しています。

$(function(){

	// container is the DOM element;
	// userText is the textbox

	var container = $("#container")
		userText = $('#userText');

あとはサイトを開いて4秒経つとsetTimeout()内の処理が実行されます。

	setTimeout(function(){

		// Shuffle the container with custom text
		container.shuffleLetters({
			"text": "Test it for yourself!"
		});

		userText.val("type anything and hit return..").fadeIn();

	},4000);

例えば4秒ごとにエフェクトさせて新たな文字列に変化させたい場合は、setTimeout()を新たに追加して引数の4000を8000とか12000とか増やしていけばOKです。
本当は繰り返し文を使ってスマートに出来るのでしょうが、僕はそこらへんまだよくわかってないので今回は下記のようなソースを書いてみました。

	// Leave a 4 second pause

	setTimeout(function(){

		// Shuffle the container with custom text
		container.shuffleLetters({
			"text": "It is done, successfully!"
		});

		userText.val("type anything and hit return..").fadeIn().shuffleLetters({
			"text": "日本語入力の表示を確認"
		});

	},4000);

	setTimeout(function(){

		userText.shuffleLetters({
			"text": "It is done, successfully!"
		});

		userTextb.val("type anything and hit return..").fadeIn().shuffleLetters({
			"text": "３行目のテキストです。"
		});
	},8000);
	setTimeout(function(){

		userTextb.shuffleLetters({
			"text": "It is done, successfully!"
		});

	},12000);
	setTimeout(function(){

		container.shuffleLetters({
			"text": "The event is set to start by 4 seconds."
		});

		userText.shuffleLetters({
			"text": "You can adjust anylong you want."
		});

		userTextb.shuffleLetters({
			"text": "Test it for yourself!"
		});

	},16000);

めちゃくちゃ冗長な感じでわかりずらいですね。。。　精進します！
それでもこうやって動くものが作れるとなんだか嬉しいものです。