ver 0.0.1
Last Update 2011/09/26
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属性は必須になります。
<p class="absolute" top="0" left="0" effect="fadeIn" wait="2000"><img src="images/main_01_takenoko.png" alt=""></p>
<div id="fadeIn" class="slideEffectWrapper"> <p class="absolute" top="0" left="0" effect="fadeIn"><img src="images/main_01_takenoko.png" alt=""></p> </div>
<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>
<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>
<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>
<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>
<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>