Reference | jQuery.slideEffect

仕様

jQueryのプラグインとして開発してあります。
基本的にブロック要素でマークアップした順にコンテンツがスライドショーのようにエフェクト演出で表示されます。 

<!Doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery-slideEffect.js"></script>
<script type="text/javascript">
$(function(){
	$('#demo').slideEffect();
});
</script>
<link rel="stylesheet" href="jquery-slideEffect.css" media="all" type="text/css">
</head>
<body>

<div class="section">

	<div id="demo" class="slideEffectWrapper">
		<p class="absolute" top="0" left="0" effect="fadeIn" wait="1250"><img src="images/main_01_takenoko.png" alt=""></p>
		<p class="absolute" top="164" left="0" effect="fadeIn" wait="3000"><img src="images/head_01_takenoko.png" alt=""></p>
		<p class="absolute" top="0" left="0" effect="fadeIn" wait="1250"><img src="images/main_02_yogore.png" alt=""></p>
		<p class="absolute" top="263" left="0" effect="fadeIn" wait="3000"><img src="images/head_02_yogore.png" alt=""></p>
		<p class="absolute" top="0" left="0" effect="fadeIn" wait="1250"><img src="images/main_03_ninjin.png" alt=""></p>
		<p class="absolute" top="146" left="0" effect="fadeIn" wait="3000"><img src="images/head_03_ninjin.png" alt=""></p>
		<p class="absolute" top="0" left="0" effect="fadeIn"><img src="images/filter_black.png" alt=""></p>
		<p class="absolute" top="0" left="0" effect="moveTopIn" speed="1250"><a href="#"><img src="images/menu_01_takenoko.png" alt=""></a></p>
		<p class="absolute" top="0" left="212" effect="moveTopIn" speed="1250"><a href="#"><img src="images/menu_02_yogore.png" alt=""></a></p>
		<p class="absolute" top="0" left="424" effect="moveTopIn" speed="1250"><a href="#"><img src="images/menu_03_ninjin.png" alt=""></a></p>
	</div>
	
</div><!-- /.section -->

</body>
</html>

実装方法

基本的な実装方法です。

まず、jQueryとjQuery-slideEffect.jsを読み込みます。そして、基本的なマークアップを行います。

<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery-slideEffect.js"></script>
<script type="text/javascript">
$(function(){
	$('#demo').slideEffect();
});
</script>
<link rel="stylesheet" href="jquery-slideEffect.css" media="all" type="text/css">
</head>
<body>
<div id="demo" class="slideEffectWrapper">
	<p class="absolute" top="0" left="0" effect="fadeIn" wait="1250"><img src="images/main_01_takenoko.png" alt=""></p>
</div>
</body>
</html>

下記のようにブロック要素でマークアップした順にアニメーションが実行されます。

<div id="demo" class="slideEffectWrapper">
	<p class="absolute" top="0" left="0" effect="fadeIn" wait="1250"><img src="images/main_01_takenoko.png" alt=""></p>
	<p class="absolute" top="164" left="0" effect="fadeIn" wait="3000"><img src="images/head_01_takenoko.png" alt=""></p>
	<p class="absolute" top="0" left="0" effect="fadeIn" wait="1250"><img src="images/main_02_yogore.png" alt=""></p>
</div>

ドキュメント

マークアップするタグにカスタム属性を設定することで、エフェクトの調整などができます。

基本マークアップ

下記が基本マークアップになります。class="absolute" とtop, left属性は必須になります。

基本属性
class="absolute" これがあることで、アニメーションするコンテンツの判別を行います。必須です。
top: 左端上を0基点とし、値が増えるとY軸が下に向かいます。cssのpositionのtopと同等です。
left: 左端上を0基点とし、値が増えるとX軸が右に向かいます。cssのpositionのleftと同等です。
effect: エフェクトの種類を指定します。
wait: ミリ秒指定で表示時間を調整できます。
<p class="absolute" top="0" left="0" effect="fadeIn" wait="2000"><img src="images/main_01_takenoko.png" alt=""></p>

エフェクトリファレンス

fadeIn
オプションなし

<div id="fadeIn" class="slideEffectWrapper">
	<p class="absolute" top="0" left="0" effect="fadeIn"><img src="images/main_01_takenoko.png" alt=""></p>
</div>
moveRightIn
コンテンツが右からスライドします。
speed: ミリ秒指定でアニメーションスピードを調整できます。

<div id="moveRightIn" class="slideEffectWrapper">
	<p class="absolute" top="0" left="0" effect="moveRightIn" speed="1500"><img src="images/main_01_takenoko.png" alt=""></p>
</div>
moveLeftIn
コンテンツが左からスライドします。
speed: ミリ秒指定でアニメーションスピードを調整できます。

<div id="moveLeftIn" class="slideEffectWrapper">
	<p class="absolute" top="0" left="0" effect="moveLeftIn" speed="1500"><img src="images/main_01_takenoko.png" alt=""></p>
</div>
moveTopIn
コンテンツが上からスライドします。
speed: ミリ秒指定でアニメーションスピードを調整できます。

<div id="moveTopIn" class="slideEffectWrapper">
	<p class="absolute" top="0" left="0" effect="moveTopIn" speed="1500"><img src="images/main_01_takenoko.png" alt=""></p>
</div>
moveBottomIn
コンテンツが下からスライドします。
speed: ミリ秒指定でアニメーションスピードを調整できます。

<div id="moveBottomIn" class="slideEffectWrapper">
	<p class="absolute" top="0" left="0" effect="moveBottomIn" speed="1500"><img src="images/main_01_takenoko.png" alt=""></p>
</div>
changeImage
複数の要素がループで切り替わります。
<div id="changeImage" class="slideEffectWrapper">
	<ul class="absolute" top="0" left="0" effect="changeImage">
		<li><img src="images/main_01_takenoko.png" alt=""></li>
		<li><img src="images/main_02_yogore.png" alt=""></li>
		<li><img src="images/main_03_ninjin.png" alt=""></li>
	</ul>
</div>

Copyright © funnythingz