[JS]ウェーブ状のアニメーションでフェードイン・アウトさせる超軽量スクリプト -WaveAnimate

サイト構築 -JavaScript

Post on:2011年9月5日

WaveAnimateのデモ

デモでは3通りのアニメーションがあり、上キャプチャのものは端のエレメントから順番にフェードします。

エレメント（右端の赤）を除外し、アコーディオンのようなアニメーションを適用することもできます。

赤いエレメントを除外したデモ

WaveAnimateの実装

デモを例に、実装方法を紹介します。

HTML

デモではdiv要素で実装したボックスを配置しているだけです。

<div id="demo1">
	<div id="el1a" class="fademe">&nbsp;</div>
	<div id="el2a" class="fademe">&nbsp;</div>
	<div id="el3a" class="fademe">&nbsp;</div>
	<div id="el4a" class="fademe">&nbsp;</div>
	<div id="el5a" class="fademe">&nbsp;</div>
	<div id="el6a" class="fademe">&nbsp;</div>
	<div id="el7a" class="fademe">&nbsp;</div>
	<div id="el8a" class="fademe">&nbsp;</div>
	<div id="el9a" class="fademe">&nbsp;</div>
	<div id="el10a" class="fademe">&nbsp;</div>
</div>

外部ファイル

「jquery.js」と「jQuery Easing Plugin」と当スクリプトを外部ファイルとして指定します。

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.waveanimate-0.3.js"></script>

JavaScript

アニメーションの終了時にコールバック関数が利用できます。

('#demo1').waveAnimate({ 
	reverse: true, 
	onFinish: function(){ 
		$('#demo1status').text('Fade Out Finished!') 
	}
});

[ad#ad-2]

スクリプトのオプション

スクリプトのオプションでは、アニメーションのタイミングやスピード、エフェクトの種類などを設定できます。

$('#demo1').waveAnimate({ 
	delay: 100, // delay between animations
	speed: 500, // duration of animation
	exponential: false, // normal or exponential
	properties: { opacity: 'toggle', height: 'toggle' }, // CSS
	reverse: false, // in which direction to affect the children
	affected: '.fademe', // the targeted children, empty for all children
	easing: 'linear', // the easing to use
	onFinish: function() {} // on finish callback function
});