Senin, 19 November 2012

Membuat Animasi Gambar/Photo Melayang di Blog

Cara membuat animasi foto terbang/melayang pada blog

1. Login ke Blogger
2. Pilih Tata Letak => Tambah Gadget
3. Pilih Html/Javascript dan masukkan kode dibawah ini.

<script type="text/javascript">var vmin=4;
var vmax=6;
var vr=4;
var timer1;


function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function Chip(chipname,width,height){
 this.named=chipname;
 this.vx=vmin+vmax*Math.random();
 this.vy=vmin+vmax*Math.random();
 this.w=width+20;
 this.h=height;
 this.xx=0;
 this.yy=0;
 this.timer1=null;
}

function movechip(chipname){
if (document.getElementById){
eval("chip="+chipname);
   if (window.innerWidth || window.opera){
   pageX=window.pageXOffset;
     pageW=window.innerWidth-40;
     pageY=window.pageYOffset;
     pageH=window.innerHeight-20;
    }
   else if (document.body){
   pageX=iecompattest().scrollLeft;
     pageW=iecompattest().offsetWidth-40;
     pageY=iecompattest().scrollTop;
     pageH=iecompattest().offsetHeight-20;
    }

   chip.xx=chip.xx+chip.vx;
   chip.yy=chip.yy+chip.vy;
  
   chip.vx+=vr*(Math.random()-0.5);
   chip.vy+=vr*(Math.random()-0.5);
   if(chip.vx>(vmax+vmin))  chip.vx=(vmax+vmin)*2-chip.vx;
   if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
   if(chip.vy>(vmax+vmin))  chip.vy=(vmax+vmin)*2-chip.vy;
   if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;

   if(chip.xx<=pageX){
   chip.xx=pageX;
      chip.vx=vmin+vmax*Math.random();
     }
   if(chip.xx>=pageX+pageW-chip.w){
   chip.xx=pageX+pageW-chip.w;
      chip.vx=-vmin-vmax*Math.random();
     }
   if(chip.yy<=pageY)
     {chip.yy=pageY;
      chip.vy=vmin+vmax*Math.random();
     }
   if(chip.yy>=pageY+pageH-chip.h)
     {chip.yy=pageY+pageH-chip.h;
      chip.vy=-vmin-vmax*Math.random();
     }

document.getElementById(chip.named).style.left=chip.xx+"px";
document.getElementById(chip.named).style.top=chip.yy+"px";


   chip.timer1=setTimeout("movechip('"+chip.named+"')",100);
  }
}

//Step 1: Define unique variable names depending on number of flying images (ie:1):
var flyimage

function pagestart(){
//Step 2: Using the same variable names as 1), add or delete more of the below lines (60=width, height=80 of image):
 flyimage=new Chip("flyimage",47,68);

//Step 3: Using the same variable names as 1), add or delete more of the below lines:
movechip("flyimage");
}

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart

function close_bar1()
{
 //if done then close the progress bar pop-up window
 document.getElementById('flyimage').style.visibility = 'hidden';
}
</script>

<div id="flyimage" style="left: -400px; position: absolute;">
<a href="http://www.blogger.com/post-edit.g?blogID=2233714512413696391&amp;postID=6243668994371441867#" onclick="close_bar1(); return false;"><img border="0" src="http://i1163.photobucket.com/albums/q544/blogrudy/pocong_zps04775238.gif" /></a>
</div>

Selamat mencoba and Have Fun in your Blog Guys and My Blog guys :D

Tidak ada komentar:

Posting Komentar