Pages

0

仿 Google Doodle - Eadweard J. Muybridge 英國實驗攝影師 182 歲誕


點選上面這張圖片就可以看到效果~

這是 google 在 2012/04/09 的 google doodle 所展示的小動畫，
主要是紀念 Eadweard J. Muybridge 英國實驗攝影師 182 歲誕辰，
雖然當天晚上就使用 jquery 做了簡單的單格動畫，
但是一直沒有好好的把程式碼寫好，
這次抽了些時間來把整個google doodle給完整寫出來~
其實整個程式碼並沒有很難，
主要的重點只有兩個：

第一、活用css的背景和遮罩

#button{width:65px; height:52px; background:url(按鈕圖) 0 -3px no-repeat; z-index:1000; top:78px; left:225px; position:absolute;}
#frame{width:469px; height:162px; background-image:url(框框圖); z-index:999; top:20px; left:20px; position:absolute; border:3px solid #ddd;}
#div0{width:0; height:0; position:absolute; top:23px; left:23px; z-index:2;}
#div1{width:467px; height:162px; position:relative; top:0; left:0; overflow:hidden;}
#div2{width:1500px; height:162px; position:absolute; top:0; left:0; background-image:url(馬的圖);}

第二、利用jquery控制動畫時間

function a1(){
  $("#div2").animate({"left":0-67*12+"px"},12*190,"easeInQuad",a2);   
}
function a2(){
  $("#div2").css({"left":"0"}).animate({"left":0-67*12+"px"},12*72,"linear",a3);
}
function a3(){
  $("#div2").css({"left":"0"}).animate({"left":0-67*12+"px"},12*14.5,"linear",a4);
}
function a4(){
  setTimeout(function(){
    if(i<=10){
      i=i+1;
      $("#div2").css({"left":0-67*i+"px"});
      a4();
    }
    else{
      i=0;
      $("#div2").css({"left":0-67*i+"px"});
      a4();
    }
  },48);
}

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

沒有留言:

張貼留言