Script nảy bóng khi rê chuột.

Script kết hợp HTML5 tạo hiệu ứng những quả bóng sắp xếp thành logo và nảy lên vui nhộn khi rê chuột.


<style type="text/css">
#logo{
position:relative; width:950px;
margin-top:30px;
}
.particle{
position:absolute; z-index:-1;
}
.circle{
-moz-border-radius:160px;
-webkit-border-radius:160px;
-khtml-border-radius:160px;
border-radius:160px;
}
</style>

<div id="logo"></div>

<script type="text/javascript">
//<![CDATA[
try{var maxMove=200,mouseX=-200,mouseY=-200,time=35,timer,listBall=[],logoElement,isIE,bodyX,bodyY,bodyW,differenceBodyX=0,differenceBodyY=0,differenceBodyW=0;var init=function(){if(logoElement=document.getElementById("logo")){document.addEventListener?document.addEventListener('mousemove',updateMousePosition,false):document.attachEvent('onmousemove',updateMousePosition);initBall();}},updateMousePosition=function(event){maxMove=200;mouseX=event.clientX-logoElement.offsetLeft;mouseY=event.clientY-logoElement.offsetTop;},getBodyPosition=function(){return[isIE?window.screenLeft:window.screenX,isIE?window.screenTop:window.screenY,document.body.clientWidth];},initBall=function(){isIE=window.navigator.userAgent.indexOf("MSIE")!=-1?true:false;listBall=[createBall(50,7,9,"1dca8f"),createBall(30,15,9,"1dca8f"),createBall(14,29,11,"1dca8f"),createBall(4,52,12,"1dca8f"),createBall(4,79,12,"1dca8f"),createBall(14,104,11,"1dca8f"),createBall(30,122,9,"1dca8f"),createBall(50,128,9,"1dca8f"),createBall(70,15,9,"1dca8f"),createBall(86,29,8,"1dca8f"),createBall(86,107,8,"1dca8f"),createBall(70,117,9,"1dca8f"),createBall(180,7,9,"b60e4d"),createBall(160,15,9,"b60e4d"),createBall(144,29,11,"b60e4d"),createBall(134,52,12,"b60e4d"),createBall(134,79,12,"b60e4d"),createBall(144,104,11,"b60e4d"),createBall(160,122,9,"b60e4d"),createBall(180,128,9,"b60e4d"),createBall(200,15,9,"b60e4d"),createBall(212,29,11,"b60e4d"),createBall(212,104,11,"b60e4d"),createBall(200,122,9,"b60e4d"),createBall(220,52,12,"b60e4d"),createBall(220,79,12,"b60e4d"),createBall(267,7,10,"f37d1e"),createBall(265,29,11,"f37d1e"),createBall(264,52,12,"f37d1e"),createBall(264,79,12,"f37d1e"),createBall(265,104,11,"f37d1e"),createBall(267,128,9,"f37d1e"), createBall(292,7,10,"f37d1e"),createBall(314,22,9,"f37d1e"),createBall(329,42,8,"f37d1e"),createBall(335,65,7,"f37d1e"),createBall(332,87,6,"f37d1e"),createBall(322,107,5,"f37d1e"),createBall(307,125,4,"f37d1e"),createBall(294,135,3,"f37d1e"),createBall(374,7,10,"2cadf7"),createBall(372,29,11,"2cadf7"),createBall(371,52,12,"2cadf7"),createBall(371,79,12,"2cadf7"),createBall(372,104,11,"2cadf7"),createBall(374,128,10,"2cadf7"),createBall(399,7,9,"2cadf7"),createBall(423,8,8,"2cadf7"),createBall(445,9,7,"2cadf7"),createBall(399,66,9,"2cadf7"),createBall(423,67,8,"2cadf7"),createBall(445,68,7,"2cadf7"),createBall(399,128,9,"2cadf7"),createBall(423,130,8,"2cadf7"),createBall(445,131,7,"2cadf7"),createBall(525,-2,13,"f21010"),createBall(505,16,11,"f21010"),createBall(533,131,10,"f21010"),createBall(555,-20,15,"f21010"),createBall(546,13,14,"f21010"),createBall(537,44,13,"f21010"),createBall(528,72,12,"f21010"),createBall(519,98,11,"f21010"),createBall(510,123,10,"f21010"),createBall(490,115,10,"f21010"),createBall(606,7,10,"24c928"),createBall(605,29,11,"24c928"),createBall(605,52,12,"24c928"),createBall(605,79,12,"24c928"),createBall(605,104,11,"24c928"),createBall(607,128,10,"24c928"),createBall(632,68,12,"24c928"),createBall(650,90,10,"24c928"),createBall(670,112,8,"24c928"),createBall(686,132,7,"24c928"),createBall(650,46,10,"24c928"),createBall(670,24,8,"24c928"),createBall(686,6,7,"24c928"),createBall(738,128,10,"000000"),createBall(830,7,9,"8f008f"),createBall(810,15,9,"8f008f"),createBall(794,29,11,"8f008f"),createBall(784,52,12,"8f008f"),createBall(784,79,12,"8f008f"),createBall(794,104,11,"8f008f"),createBall(810,122,9,"8f008f"),createBall(830,128,9,"8f008f"),createBall(850,15,9,"8f008f"),createBall(866,29,8,"8f008f"),createBall(866,107,8,"8f008f"),createBall(850,117,9,"8f008f"), createBall(960,7,9,"0000ff"),createBall(940,15,9,"0000ff"),createBall(924,29,11,"0000ff"),createBall(914,52,12,"0000ff"),createBall(914,79,12,"0000ff"),createBall(924,104,11,"0000ff"),createBall(940,122,9,"0000ff"),createBall(960,128,9,"0000ff"),createBall(980,15,9,"0000ff"),createBall(992,29,11,"0000ff"),createBall(992,104,11,"0000ff"),createBall(980,122,9,"0000ff"),createBall(1000,52,12,"0000ff"),createBall(1000,79,12,"0000ff"),createBall(1067,7,10,"ff9966"),createBall(1065,29,11,"ff9966"),createBall(1065,52,12,"ff9966"),createBall(1065,79,12,"ff9966"),createBall(1065,104,11,"ff9966"),createBall(1067,128,10,"ff9966"),createBall(1091,28,8,"ff9966"),createBall(1106,46,10,"ff9966"),createBall(1125,68,12,"ff9966"),createBall(1144,46,10,"ff9966"),createBall(1163,28,8,"ff9966"),createBall(1187,7,10,"ff9966"),createBall(1185,29,11,"ff9966"),createBall(1185,52,12,"ff9966"),createBall(1185,79,12,"ff9966"),createBall(1185,104,11,"ff9966"),createBall(1187,128,10,"ff9966")];var temp=getBodyPosition();bodyX=temp[0];bodyY=temp[1];bodyW=temp[2];draw();},draw=function(){var temp=getBodyPosition();differenceBodyX=temp[0]-bodyX;differenceBodyY=temp[1]-bodyY;differenceBodyW=temp[2]-bodyW;bodyX=temp[0];bodyY=temp[1];bodyW=temp[2];maxMove=Math.max(0,maxMove-2);var stop=true,i;for(i=0;i<listBall.length;i++){listBall[i].update();if(stop)
stop=listBall[i].stop;};time=stop?250:35;timer=window.setTimeout(draw,time);},createBall=function(positionX,positionY,width,color){return new BALL(positionX,positionY,width,color);},BALL=function(positionX,positionY,width,color){this.positionX=this.positionStartX=positionX;this.positionY=this.positionStartY=positionY;this.width=this.widthStart=width;this.moveX=100*(Math.random()-0.5);this.moveY=100*(Math.random()-0.5);this.l=3+Math.random()*98;this.r=0.1+Math.random()*0.4;this.e=0;this.g=1;this.stop=false;this.element=document.createElement("div");this.element.className="particle";this.style=this.element.style;if(isIE){this.element.innerHTML=".";this.style.fontFamily="Monospace";this.style.color="#"+color;this.style.fontSize="100px";this.style.lineHeight=0;this.style.cursor="default";}else{this.element.className+=" circle";this.style.backgroundColor="#"+color;};logoElement.appendChild(this.element);};BALL.prototype.update=function(){this.positionX+=this.moveX;this.positionY+=this.moveY;this.moveX=Math.min(50,Math.max(-50,(this.moveX+(differenceBodyX+differenceBodyW)/this.widthStart)*0.92));this.moveY=Math.min(50,Math.max(-50,(this.moveY+differenceBodyY/this.widthStart)*0.92));var differenceMouseX=mouseX-this.positionX,differenceMouseY=mouseY-this.positionY,differenceMouseZ=Math.sqrt(differenceMouseX*differenceMouseX+differenceMouseY*differenceMouseY);differenceMouseX/=differenceMouseZ;differenceMouseY/=differenceMouseZ;if(differenceMouseZ<maxMove){this.moveX-=differenceMouseX*this.l;this.moveY-=differenceMouseY*this.l;this.moveX+=(0.005-this.e)*0.4;this.g=Math.max(0,this.g*0.9-0.01);this.moveX*=1-this.g;this.moveY*=1-this.g;}else{this.e+=(this.r-this.e)*0.005;this.g=Math.min(1,this.g+0.03);};var differencePositionX=this.positionStartX-this.positionX,differencePositionY=this.positionStartY-this.positionY,differencePositionZ=Math.sqrt(differencePositionX*differencePositionX+differencePositionY*differencePositionY);this.moveX+=differencePositionX*this.e;this.moveY+=differencePositionY*this.e;this.width=this.widthStart+differencePositionZ/8;this.stop=differencePositionZ<0.3&&this.moveX<0.3&&this.moveY<0.3;if(!this.stop){if(isIE){}else{this.style.width=this.style.height=this.width*2+"px";};this.style.left=this.positionX-(isIE?20:0)+"px";this.style.top=this.positionY+"px";}};init();}catch(e){};
//]]>
</script>