【jQuery】使用jQuery製作仿Flash的動畫效果

去年底公司官網header部分要替換動畫效果因應聖誕節與新年，但由於公司考量到越來越多人使用行動裝置，某些行動裝置可能無法讀取Flash效果，所以改以jQuery效果達成。

至於本篇文章範例，礙於不便用公司的圖檔作demo，所以畫面圖檔是使用：

原始圖檔來源
Designed By : Visionmates
Author Website : http://www.visionmates.com/
License / Usage details: Free for personal and non commercial use
感謝崇創意協助圖片去背處理。

線上看範例請點我

關於執行邏輯：

本次demo範例中的動畫效果，採用了以下jQuery：
jQuery中的fadeIn、jQuery中的animate、jQuery UI中的show Effects，如還不了解如何使用可先至官網查看。

以上三種效果使用方式，除了前幾個須各自帶各自的需求參數，最後一個參數都是callback function，也由於動畫效果通常都是依照時間順序去執行，所以可以利用這些callback function特性來達成動畫的順序性，例如：

   
   $("#aaa").show('slide', {direction: 'down'}, 800 ,function(){  
      $("#bbb").fadeIn(500,function(){

      });
   });

上述這段程式碼表示：id=aaa的DOM物件首先執行show slide效果，等待此效果完成結束時才換id=bbb的DOM物件接著執行fadeIn效果。

所以，只要先預想好您的效果順序，並且確定每個DOM所要使用的效果後(您也可以不使用本篇使用的這三種jQuery效果，可替換)，依序帶入callback function內即可完成仿Flash動畫。

有了畫面後須要先將畫面轉為html結構，由於我本身並非設計人員，所以請了朋友崇創意協助做某些圖的去背處理，接著就是將去背完成的各個獨立圖檔組成html結構，並用css去定位各個圖檔，其中要一起同時執行同一效果的用一個大div包附。

關於demo範例：
Html部分：

div id=couple	情侶圖檔區塊。
div id=flower	花束區塊。
div id=center_heart	背景大愛心(白底心+紅框心)。
div id=word	Happy Valentine's Day文字區塊。
div id=love	I love you文字區塊。
div id=lovetoo	I love you,too文字區塊。
div id=white-lheart id=white-rheart	左上白愛心區塊、右上白愛心區塊。
div id=crsh-left id=crsh-right id=crsh-left-c id=crsh-right-c id=crbh-left id=crbh-right	背景大愛心(白底心+紅框心)中間六個愛心區塊。由於我要平行兩個愛心同時顯示執行相同效果，所以兩兩再各自用一個div包起來。
div id=many-heart	其他剩餘背景小愛心

上述提到的「要一起同時執行同一效果的用一個大div包附」，以id=crsh-left、id=crsh-right來說，此二div外頭還包了一個id=crsh-bottom的div：

 
   //寫法1  
   $("#crsh-bottom").fadeIn(1000 ,function(){  
      //callback function內動作
   });
   //寫法2  
   $("#crsh-left,#crsh-right").fadeIn(1000 ,function(){  
       //callback function內動作
   });

上述兩種js寫法，都可以讓id=crsh-left、id=crsh-right此二div在視覺上看起來是同時執行fadIn效果，但實際上測試會發現，若是使用「寫法2」，則callback function會呼叫執行兩次，也就是說，「寫法2」也許他只是讓我們視覺上看起來是同時執行fadIn效果、但實際上還是分開執行，所以才會呼叫執行兩次callback function，但由於我們callback function內要執行的動作只要一次，所以改用「寫法1」，讓包付此二div的DOM去執行。

註：也許「寫法2」callback function呼叫執行兩次在某些情況下視覺上看不出差異，但先前測試過若是做類似【CSS3】使用jQuery的DOM操作、CSS3的transform製作風車旋轉效果這樣須要計算角度並去累加度數時可能就會有明顯差異，所以安全起見還是包付成一個大的div再去做處理(也可以省去jQuery selector撰寫很多的麻煩)。

CSS部分：

#main{
 width:600px; 
 margin:0 25%;
}
#content{
 width:600px;
 height:425px;
 background-image:url('images/bg.jpg');
 position:relative;
 overflow:hidden; /*因為Happy Valentine's Day文字要從區塊外出現，必須設定overflow把文字最初超出區塊部分作隱藏*/
}
#couple{
 width:217px;
 height:145px;
 position:absolute;
 bottom:0px;
 left:173px;
 z-index:10;
 display:none; /*for 特效，須先隱藏*/
}
#flower{
 width:75px;
 height:145px;
 position:absolute;
 bottom:80px;
 left:242px;
 z-index:10;
 display:none; /*for 特效，須先隱藏*/
}
#center_heart
{
 width:408px;
 height:368px;
 position:absolute;
 bottom:36px;
 left:110px;
 display:none; /*for 特效，須先隱藏*/
}
#word
{
 width:360px;
 height:55px;
 position:absolute;
 bottom:-51px; /*for 特效，須先將文字設在區塊外*/
 /*bottom:225px;  文字最後要停留的位置，在js特效中設定*/ 
 left:136px;
 z-index:10; 
}
#love
{
 width:117px;
 height:112px;
 position:absolute;
 bottom:85px;
 left:23px; 
 display:none; /*for 特效，須先隱藏*/
}
#lovetoo
{
 width:106px;
 height:97px;
 position:absolute;
 bottom:87px;
 left:467px; 
 display:none; /*for 特效，須先隱藏*/
}
#white-lheart{
 width:98px;
 height:99px;
 position:absolute;
 bottom:309px;
 left:9px; 
 display:none; /*for 特效，須先隱藏*/
}
#white-rheart{
 width:98px;
 height:99px;
 position:absolute;
 bottom:328px;
 left:485px; 
 display:none; /*for 特效，須先隱藏*/
}
#crsh-bottom{
 width:295px;
 height:255px;
 position:absolute;
 bottom:106px;
 left:161px;
 display:none; /*for 特效，須先隱藏*/
}
#crsh-left{
 width:48px;
 height:40px;
 position:absolute;
 bottom:30px;
 left:47px;
}
#crsh-right{
 width:48px;
 height:40px;
 position:absolute;
 bottom:45px;
 left:156px;
}

#crsh-center{
 width:295px;
 height:255px;
 position:absolute;
 bottom:106px;
 left:161px;
 display:none; /*for 特效，須先隱藏*/
}
#crsh-left-c{
 width:48px;
 height:40px;
 position:absolute;
 bottom:77px;
 left:12px;
}
#crsh-right-c{
 width:48px;
 height:40px;
 position:absolute;
 bottom:85px;
 left:203px;
}

#crbh{
 width:295px;
 height:255px;
 position:absolute;
 bottom:106px;
 left:161px;
 display:none; /*for 特效，須先隱藏*/
}
#crbh-left{
 width:64px;
 height:56px;
 position:absolute;
 bottom:170px;
 left:8px;
}
#crbh-right{
 width:64px;
 height:56px;
 position:absolute;
 bottom:182px;
 left:228px;
}
#many-heart{
 width:600px;
 height:425px;
 position:absolute;
 display:none; /*for 特效，須先隱藏*/
}
#mhwb1{
 width:32px;
 height:34px;
 position:absolute;
 bottom:237px;
 left:69px;
}
#mhwb2{
 width:32px;
 height:34px;
 position:absolute;
 bottom:87px;
 left:415px;
}
#mhws1{
 width:34px;
 height:33px;
 position:absolute;
 bottom:74px;
 left:89px;
}
#mhws2{
 width:34px;
 height:33px;
 position:absolute;
 bottom:41px;
 left:392px;
}
#mhws3{
 width:34px;
 height:33px;
 position:absolute;
 bottom:92px;
 left:123px;
}
#mhws4{
 width:34px;
 height:33px;
 position:absolute;
 bottom:61px;
 left:426px;
}
#mhws5{
 width:34px;
 height:33px;
 position:absolute;
 bottom:60px;
 left:119px;
}
#mhws6{
 width:34px;
 height:33px;
 position:absolute;
 bottom:87px;
 left:451px;
}
#mhws7{
 width:34px;
 height:33px;
 position:absolute;
 bottom:374px;
 left:147px;
}
#mhws8{
 width:34px;
 height:33px;
 position:absolute;
 bottom:288px;
 left:519px;
}
#mhrb1{
 width:48px;
 height:47px;
 position:absolute;
 bottom:43px;
 left:150px;
}
#mhrb2{
 width:48px;
 height:47px;
 position:absolute;
 bottom:381px;
 left:273px;
}
#mhrb3{
 width:48px;
 height:47px;
 position:absolute;
 bottom:237px;
 left:542px;
}

#mhrs1{
 width:32px;
 height:34px;
 position:absolute;
 bottom:74px;
 left:24px;
}
#mhrs2{
 width:32px;
 height:34px;
 position:absolute;
 bottom:265px;
 left:12px;
}
#mhrs3{
 width:32px;
 height:34px;
 position:absolute;
 bottom:191px;
 left:50px;
}
#mhrs4{
 width:32px;
 height:34px;
 position:absolute;
 bottom:305px;
 left:82px;
}
#mhrs5{
 width:32px;
 height:34px;
 position:absolute;
 bottom:392px;
 left:410px;
}
#mhrs6{
 width:32px;
 height:34px;
 position:absolute;
 bottom:43px;
 left:450px;
}
#mhrs7{
 width:32px;
 height:34px;
 position:absolute;
 bottom:181px;
 left:507px;
}

JS部分：
載入必要檔案：

本次範例詳細JS部分：

 
$(document).ready(function(){
   //情侶
   $("#couple").show('slide', {direction: 'down'}, 800 ,function(){
      //背景愛心群
      $("#many-heart").fadeIn(500,function(){
         //花束
         $("#flower").fadeIn(500,function(){
            //背景大愛心(白底心+紅框心)
            $("#center_heart").fadeIn(2000 ,function(){
               //左上白愛心
               $("#white-lheart").fadeIn(300 ,function(){
                  //右上白愛心
                  $("#white-rheart").fadeIn(500 ,function(){
                     //I love you文字
                     $("#love").fadeIn(1000 ,function(){
                        //I love you,too文字
                        $("#lovetoo").fadeIn(800 ,function(){
                           //背景大愛心內側下方兩個愛心
                           $("#crsh-bottom").fadeIn(1000 ,function(){
                              //背景大愛心內側中間兩個愛心
                              $("#crsh-center").fadeIn(1000 ,function(){
                                 //背景大愛心內側上方兩個愛心
                                 $("#crbh").fadeIn(1000 ,function(){
                                    //Happy Valentine's Day文字
                                    $("#word").animate({bottom:225},1000,"easeOutBounce",function(){                                                                                                                                                                                                                 
                                       //花束重複傾斜動作
                                       setInterval(GoSlant,1000);
                                    });            
                                 });
                              });
                           });
                        });
                     });
                  });
               });
            });
         });
      });
   });
 
});

   function GoSlant()
   {
      var slantDeg = 5; //傾斜度數
      var nowDeg = $("#deg").val();
      if ( nowDeg=="" || nowDeg=="-" + slantDeg ){ nowDeg=slantDeg; }else{ nowDeg="-" + slantDeg; }
      $("#deg").val(nowDeg); 
      $("#flower").css("transform","rotate(" + nowDeg + "deg)");
      $("#flower").css("transform-origin","bottom");  
   }

上述GoSlant function是花束最後的傾斜搖擺部分，相關閱讀：【CSS3】使用jQuery的DOM操作、CSS3的transform製作風車旋轉效果

4 則留言:

Unknown2013年9月24日下午9:48
妳真的好用心寫!!
給你個讚~
回覆刪除
回覆
Kamicreator2014年3月27日下午2:27
這位大大~您說的方法也是我目前使用的方法~

我指的是您寫的這段

$("#couple").show('slide', {direction: 'down'}, 800 ,function(){
//背景愛心群
$("#many-heart").fadeIn(500,function(){
//花束
$("#flower").fadeIn(500,function(){
//背景大愛心(白底心+紅框心)
$("#center_heart").fadeIn(2000 ,function(){
//左上白愛心
$("#white-lheart").fadeIn(300 ,function(){
//右上白愛心
$("#white-rheart").fadeIn(500 ,function(){
//I love you文字
$("#love").fadeIn(1000 ,function(){
//I love you,too文字
$("#lovetoo").fadeIn(800 ,function(){
//背景大愛心內側下方兩個愛心
$("#crsh-bottom").fadeIn(1000 ,function(){
//背景大愛心內側中間兩個愛心
$("#crsh-center").fadeIn(1000 ,function(){
//背景大愛心內側上方兩個愛心
$("#crbh").fadeIn(1000 ,function(){
//Happy Valentine's Day文字
$("#word").animate({bottom:225},1000,"easeOutBounce",function(){
//花束重複傾斜動作
setInterval(GoSlant,1000);
});
});
});
});
});
});
});
});
});
});
});
});

但未來在維護上與修改實在不易=_=這點是個麻煩點~不知大大有沒有別的解法~
回覆刪除
回覆

新增留言

網頁

2013年4月11日星期四