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

エレメントをウェーブ状のアニメーションでフェードイン・フェードアウトさせるjQueryのプラグインを紹介します。
スクリプトは1.7kで超軽量です。

デモのキャプチャ

WaveAnimate jQuery Plugin
デモ

[ad#ad-2]

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
});

WaveAnimateの対応ブラウザ

対応ブラウザは下記の通りです。

  • Internet Explorer 6 and 7
  • Firefox 3.5+
  • Safari 4+
  • Google Chrome
  • Opera 9.6

sponsors

top of page

©2018 coliss