[JS]あらゆる要素をランダムにフェードアウト・インさせるスクリプト -LivingFade

サイト構築 -JavaScript

Post on:2011年7月26日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

あらゆるDOM要素をランダムなタイミングでフェードアウト・フェードインさせるjQueryのプラグインを紹介します。

LivingFade jQuery Plugin
デモ

[ad#ad-2]

デモでは複数のdiv要素がボックス状に配置されており、「Fade Out」「Fade In」ボタンをクリックすると、フェードアウト・フェードインのエフェクトがランダムなタイミングで適用されます。

デモ：ベーシック

callback機能もあり、エフェクトが終了すると、メッセージが表示されます。

エフェクトの適用範囲を指定することも可能で、下記は右下のdiv要素に異なるclass名を与え、その箇所のみ適用させないデモです。

デモ：適用範囲の指定

LivingFadeの実装

「デモ：ベーシック」を例に実装方法を紹介します。

HTML

対象となる要素を内包するdiv要素に「class="demo1"」を付与します。
※jQueryのセレクタで指定できるものであれば、何でも構いません。

	<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>

外部ファイル

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

<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.livingfade-0.2.js"></script>

JavaScript

まずは、フェードアウトと終了時のcallbackです。

$('#demo1').livingFade({ 
	onFinish: function(){ 
		$('#demo1status').text('Fade Out Finished!') 
	} 
});

フェードインは下記のようになります。

$('#demo1').livingFade({ 
	fadeTo: 1, 
	onFinish: function(){ 
		$('#demo1status').text('Fade In Finished!') 
	} 
});

スクリプトのオプション

オプションでは、ディレイのタイミングや最小・最大スピードやエフェクトの種類を指定できます。

$('#demo1').livingFade({ 
	maxDelay: 1000, // maximum delay before an element is faded in
	minSpeed: 500, // minimum fade speed (timespan of fade)
	maxSpeed: 250, // maximum fade speed
	fadeTo: 0, // 0 = fade out, 1 = fade in, 0.5 = half transparent
	affected: '.fademe', // class of affected children
	onFinish: function(){ } // callback after all fades have finished
});