文字をスロットのように動かすjs

flap.js

/**
 * @param $container コンテナ:jQueryオブジェクト
 * @param to セットしたい文字列
 * @param opt オプション
 * 		loopcount: パタパタを何度行うか
 * 		downward: 下向きのアニメーションならtrue
 * 		fontSize: フォントサイズ
 * 		divStyle:（任意：文字にあてるCSSスタイル）
 */
function flap($container, to, opt) {
	to = to.toString();
	var loopcount = (opt.loopcount != undefined) ? opt.loopcount : 0,
		downward = (opt.downward != undefined) ? opt.downward : true,
		fontSize = opt.fontSize || '12px',
		divStyle = opt.divStyle || '',
		size = to.length,
		func;

	// ランダムにフリップを生成
	if (to[0].match(/[0-9]/)) {
		func = function () {
			var result = '';
			for (var i=0; i<size; i++) {
				result += ((Math.random() * 10)+'')[0];
			}
			return result;
		}
	} else if (to[0].match(/[a-z]/)) {
		func = function () {
			var result = '';
			for (var i=0; i<size; i++) {
				result += String.fromCharCode((Math.random() * 100) % 26 + 97);
			}
			return result;
		}
	} else if (to[0].match(/[A-Z]/)) {
		func = function () {
			var result = '';
			for (var i=0; i<size; i++) {
				result += String.fromCharCode((Math.random() * 100) % 26 + 65);
			}
			return result;
		}
	}

	var html = '';
	for (var i=0; i<loopcount; i++) {
		html += ('<div style="position:absolute;top:'+(downward ? '-' : '')+fontSize+
					';left:0;opacity:0;font-size:'+fontSize+';'+
					divStyle+'" class="split_flap">'+func()+'</div>');
	}
	html += ('<div style="position:absolute;top:'+(downward ? '-' : '')+fontSize+
				';left:0;opacity:0;font-size:'+fontSize+';'+
				divStyle+'" class="split_flap">'+to+'</div>');

	// DOMへ挿入
	$container.css({position:'relative',maxHeight:fontSize}).html(html);

	// 動きをつける
	function _flip() {
		var flaps = $('.split_flap', $container);
		if (flaps.length == 0) return;
		var delay = (flaps.length == 1) ? 400 : 250;
		$('.split_flaped', $container).hide();
		flaps.eq(0).removeClass('split_flap').addClass('split_flaped')
			.animate({top:'0px', opacity: 1}, delay, _flip);
	}
	_flip();
}