WEBの為に鐘は鳴るjQueryプラグインを見やすく、わかりやすく、遊び心で整理するサイト

<link href="<PATH>/animate.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.fittext.js"></script>
<script src="<PATH>/jquery.lettering.js"></script>
<script src="<PATH>/jquery.textillate.js"></script>

<script>
    $(window).load(function(){
		var $tltDemo = $('#textillateDemo');
		$tltDemo.textillate(getOptionDate());

		$('#textillateDemoSelect select, #textillateDemoSelect input').on('change', function(){
			$tltDemo.textillate(getOptionDate());
			$tltDemo.textillate('stop');
			$tltDemo.textillate('start');
		});

		function getOptionDate() {
			var _tmp = {
				loop: true,
				in: {},
				out: {},
				inEffects: [],
				outEffects: []
			};
			var _ina01  = $('.in-animation01').val();
			var _ina02  = $('.in-animation02').val();
			var _ina03  = $('.in-animation03').val();
			var _outa01 = $('.out-animation01').val();
			var _outa02 = $('.out-animation02').val();
			var _outa03  = $('.out-animation03').val();
			_tmp.inEffects      = [_ina01];
			_tmp['in'].effect   = _ina01;
			_tmp['in'].shuffle  = (_ina02 === 'shuffle');
			_tmp['in'].reverse  = (_ina02 === 'reverse');
			_tmp['in'].sync     = (_ina02 === 'sync');
			_tmp['in'].delay     = _ina03;

			_tmp.outEffects     = [_outa01];
			_tmp['out'].effect  = _outa01;
			_tmp['out'].shuffle = (_outa02 === 'shuffle');
			_tmp['out'].reverse = (_outa02 === 'reverse');
			_tmp['out'].sync    = (_outa02 === 'sync');
			_tmp['out'].delay     = _outa03;

			return _tmp;
		}
    });
</script>

<div id="textillateDemo">
	<ul class="texts" style="display: none">
		<li>明日死ぬかのように生きよ。永遠に生きるかのように学べ。</li>
		<li>弱い者ほど相手を許すことができない。許すということは、強さの証だ。</li>
		<li>人間はその人の思考の産物にすぎない。 人は思っている通りになる。</li>
	</ul>
</div>

<div id="textillateDemoSelect">
	<div class="in-animation">
		<p class="title">IN ANIMATION</p>
		<span>EFFECT: </span>
		<select class="in-animation01">
			<option value="flash">flash</option>
			<option value="bounce">bounce</option>
			<option value="shake">shake</option>
			<option value="tada">tada</option>
			<option value="swing">swing</option>
			<option value="wobble">wobble</option>
			<option value="pulse">pulse</option>
			<option value="flip">flip</option>
			<option value="flipInX">flipInX</option>
			<option value="flipInY">flipInY</option>
			<option value="fadeIn">fadeIn</option>
			<option value="fadeInUp">fadeInUp</option>
			<option value="fadeInDown">fadeInDown</option>
			<option value="fadeInLeft">fadeInLeft</option>
			<option value="fadeInRight">fadeInRight</option>
			<option value="fadeInUpBig">fadeInUpBig</option>
			<option value="fadeInDownBig">fadeInDownBig</option>
			<option value="fadeInLeftBig" selected>fadeInLeftBig</option>
			<option value="fadeInRightBig">fadeInRightBig</option>
			<option value="bounceIn">bounceIn</option>
			<option value="bounceInDown">bounceInDown</option>
			<option value="bounceInUp">bounceInUp</option>
			<option value="bounceInLeft">bounceInLeft</option>
			<option value="bounceInRight">bounceInRight</option>
			<option value="rotateIn">rotateIn</option>
			<option value="rotateInDownLeft">rotateInDownLeft</option>
			<option value="rotateInDownRight">rotateInDownRight</option>
			<option value="rotateInUpLeft">rotateInUpLeft</option>
			<option value="rotateInUpRight">rotateInUpRight</option>
			<option value="rollIn">rollIn</option>
		</select>
		<span>OPTION: </span>
		<select class="in-animation02">
			<option value="" selected>sequence</option>
			<option value="reverse">reverse</option>
			<option value="sync">sync</option>
			<option value="shuffle">shuffle</option>
		</select>
		<span>SPEED: </span>
		<input type="text" class="in-animation03" value="30">
	</div>
	<div class="out-animation">
		<p class="title">OUT ANIMATION</p>
		<span>EFFECT: </span>
		<select class="out-animation01">
			<option value="flash">flash</option>
			<option value="bounce">bounce</option>
			<option value="shake">shake</option>
			<option value="tada">tada</option>
			<option value="swing">swing</option>
			<option value="wobble">wobble</option>
			<option value="pulse">pulse</option>
			<option value="flip">flip</option>
			<option value="flipOutX">flipOutX</option>
			<option value="flipOutY">flipOutY</option>
			<option value="fadeOut">fadeOut</option>
			<option value="fadeOutUp">fadeOutUp</option>
			<option value="fadeOutDown">fadeOutDown</option>
			<option value="fadeOutLeft">fadeOutLeft</option>
			<option value="fadeOutRight">fadeOutRight</option>
			<option value="fadeOutUpBig">fadeOutUpBig</option>
			<option value="fadeOutDownBig">fadeOutDownBig</option>
			<option value="fadeOutLeftBig">fadeOutLeftBig</option>
			<option value="fadeOutRightBig">fadeOutRightBig</option>
			<option value="bounceOut">bounceOut</option>
			<option value="bounceOutDown">bounceOutDown</option>
			<option value="bounceOutUp">bounceOutUp</option>
			<option value="bounceOutLeft">bounceOutLeft</option>
			<option value="bounceOutRight">bounceOutRight</option>
			<option value="rotateOut">rotateOut</option>
			<option value="rotateOutDownLeft">rotateOutDownLeft</option>
			<option value="rotateOutDownRight">rotateOutDownRight</option>
			<option value="rotateOutUpLeft">rotateOutUpLeft</option>
			<option value="rotateOutUpRight">rotateOutUpRight</option>
			<option value="hinge" selected>hinge</option>
			<option value="rollOut">rollOut</option>
		</select>
		<span>OPTION: </span>
		<select class="out-animation02">
			<option value="" selected>sequence</option>
			<option value="reverse">reverse</option>
			<option value="sync">sync</option>
			<option value="shuffle">shuffle</option>
		</select>
		<span>SPEED: </span>
		<input type="text" class="out-animation03" value="30">
	</div>
</div>