Add Flying Twitter Bird on website | javascript Tutorial

You can easily add a Flying Twitter Bird  on website. Learn how to 

create Flying Twitter Bird using java script.

Just Follow those step:- 

1. First Copy those java Script code.

<script type="text/javascript"> <!-- Change TwitterAccount="your username" -->var twitterAccount = "learn24bd";function tripleflapInit(a){if(typeof a=="undefined"){window.setTimeout("tripleflapInit(1)",250);return}if(!showOnMobile&&typeof navigator.userAgent=="string"&&is_mobile(navigator.userAgent)){return}if(!is_utf8(tweetThisText))tweetThisText=utf8_encode(tweetThisText);var b="http://twitter.com/home?status="+escape(tweetThisText);if(twitterAccount=="")showTweet=false;var c=twitterAccount!=""?"http://twitter.com/"+twitterAccount:otherPageOrFeed!=false?otherPageOrFeed:"http://twitter.com/";var d=document.createElement("a");d.setAttribute("id","tBird");d.setAttribute("href",c);d.setAttribute("target","_blank");d.style.display="block";d.style.position="absolute";d.style.left=birdPosX+"px";d.style.top=birdPosY+"px";d.style.width=spriteWidth+"px";d.style.height=spriteHeight+"px";d.style.background="url('"+birdSprite+"') no-repeat transparent";d.style.backgroundPosition="-0px -0px";d.style.zIndex="947";d.onmouseover=function(){scareTheBird();showButtonsTimeout=window.setTimeout("showButtons(0,"+windowWidth+","+windowHeight+")",400);window.clearTimeout(hideButtonsTimeout)};d.onmouseout=function(){hideButtonsTimeout=window.setTimeout("hideButtons()",50)};document.body.appendChild(d);var e=document.createElement("a");e.setAttribute("id","tBirdLtweet");e.setAttribute("href",b);e.setAttribute("target","_blank");e.setAttribute("title","tweet this");e.style.display="none";e.style.position="absolute";e.style.left="0px";e.style.top="-100px";e.style.background="url('"+birdSprite+"') no-repeat transparent";e.style.opacity="0";e.style.filter="alpha(opacity=0)";e.style.backgroundPosition="-64px -0px";e.style.width="58px";e.style.height="30px";e.style.zIndex="951";e.onmouseover=function(){window.clearTimeout(hideButtonsTimeout)};e.onmouseout=function(){hideButtonsTimeout=window.setTimeout("hideButtons()",50)};document.body.appendChild(e);var f=e.cloneNode(false);f.setAttribute("id","tBirdLfollow");f.setAttribute("href",c);f.setAttribute("title","follow "+(twitterAccount?"@"+twitterAccount:"me"));f.style.backgroundPosition="-64px -30px";f.style.width="58px";f.style.height="20px";f.style.zIndex="952";f.onmouseover=function(){window.clearTimeout(hideButtonsTimeout)};f.onmouseout=function(){hideButtonsTimeout=window.setTimeout("hideButtons()",50)};document.body.appendChild(f);if(showTweet==true){var g=document.createElement("div");g.setAttribute("id","tBirdStatxLow");g.style.display="none";g.style.position="absolute";g.style.left="0px";g.style.top="-100px";g.style.background="transparent";g.style.opacity="0";g.style.filter="alpha(opacity=0)";g.style.width="192px";g.style.zIndex="955";g.onmouseover=function(){window.clearTimeout(hideButtonsTimeout)};g.onmouseout=function(){hideButtonsTimeout=window.setTimeout("hideButtons()",50)};var h=g.cloneNode(false);h.setAttribute("id","tBirdStatxUpr");h.onmouseover=function(){window.clearTimeout(hideButtonsTimeout)};h.onmouseout=function(){hideButtonsTimeout=window.setTimeout("hideButtons()",50)};var i=document.createElement("div");i.setAttribute("id","tBirdStatxArrLow");i.style.background="url('"+birdSprite+"') no-repeat transparent";i.style.backgroundPosition="-64px -50px";i.style.width="32px";i.style.height="9px";i.style.margin="0 0 -1px 56px";i.style.position="relative";i.style.zIndex="957";var j=i.cloneNode(false);j.setAttribute("id","tBirdStatxArrUpr");j.style.backgroundPosition="-96px -50px";j.style.margin="-1px 0 0 60px";var k=document.createElement("div");k.setAttribute("id","tBirdStatxInLow");k.style.background="#fbfcfc";k.style.border="1px solid #555";k.style.MozBorderRadius="6px";k.style.borderRadius="6px";k.style.padding="3px 5px";k.style.fontSize="11px";k.style.fontFamily="Arial";k.style.textAlign="left";k.style.position="relative";k.style.zIndex="956";k.innerHTML="loading...";var l=k.cloneNode(false);l.setAttribute("id","tBirdStatxInUpr");l.innerHTML="loading...";g.appendChild(i);g.appendChild(k);h.appendChild(l);h.appendChild(j);document.body.appendChild(g);document.body.appendChild(h)}var m=window.setTimeout("animateSprite(0,0,0,0,null,true)",spriteAniSpeed);window.onscroll=recheckposition;if(showTweet==true)loadStatusText();recheckposition()}function animateSprite(a,b,c,d,e,f){if(typeof d!="number"||d>c-b)d=0;document.getElementById("tBird").style.backgroundPosition="-"+Math.round((b+d)*spriteWidth)+"px -"+spriteHeight*a+"px";if(f==true)return;if(typeof e!="number")e=spriteAniSpeed;timeoutAnimation=window.setTimeout("animateSprite("+a+","+b+","+c+","+(d+1)+","+e+")",e)}function animateSpriteAbort(){window.clearTimeout(timeoutAnimation)}function recheckposition(a){if(a!=true)a=false;if(birdIsFlying)return false;windowHeight=getWindowHeight();windowWidth=getWindowWidth();if(windowHeight<=spriteHeight+2*birdSpaceVertical)windowHeight=spriteHeight+2*birdSpaceVertical+1;if(windowWidth<=spriteWidth)windowWidth=spriteWidth+1;if(typeof window.pageYOffset=="number")scrollPos=window.pageYOffset;else if(document.body&&document.body.scrollTop)scrollPos=document.body.scrollTop;else if(document.documentElement&&document.documentElement.scrollTop)scrollPos=document.documentElement.scrollTop;birdPosY=parseInt(document.getElementById("tBird").style.top);birdPosX=parseInt(document.getElementById("tBird").style.left);if(scrollPos+birdSpaceVertical>=birdPosY||scrollPos+windowHeight-spriteHeight<birdPosY||a){hideButtons();elemPosis=chooseNewTarget();if(elemPosis.length<1){elemType=null;elemNr=null;elemTop=scrollPos+Math.round(Math.random()*(windowHeight-spriteHeight));elemLeft=Math.round(Math.random()*(windowWidth-spriteWidth));elemWidth=0}else{newTarget=elemPosis[Math.round(Math.random()*(elemPosis.length-1))];elemType=newTarget[0];elemNr=newTarget[1];elemTop=newTarget[2];elemLeft=newTarget[3];elemWidth=newTarget[4]}targetTop=elemTop-spriteHeight;targetLeft=Math.round(elemLeft-spriteWidth/2+Math.random()*elemWidth);if(targetLeft>windowWidth-spriteWidth-24)targetLeft=windowWidth-spriteWidth-24;else if(targetLeft<0)targetLeft=0;birdIsFlying=true;flyFromTo(birdPosX,birdPosY,targetLeft,targetTop,0)}}function chooseNewTarget(){var a=new Array;var b=scrollPos+spriteHeight+birdSpaceVertical;var c=scrollPos+windowHeight-birdSpaceVertical;for(var d=0;d<targetElems.length;d++){var e=targetElems[d];var f=document.getElementsByTagName(e).length;for(var g=0;g<f;g++){var h=document.getElementsByTagName(e)[g].offsetTop;var i=document.getElementsByTagName(e)[g].offsetLeft;var j=document.getElementsByTagName(e)[g].offsetWidth;if(h<=b||h>=c||j<minElemWidth||i<0){continue}a[a.length]=new Array(e,g,h,i,j);if(a.length>=neededElems4random)return a}}return a}function flyFromTo(a,b,c,d,e,f){justStarted=e==0;e+=e>birdSpeed/2?birdSpeed:Math.round(e==0?birdSpeed/4:birdSpeed/2);solvedFuture=e+(e>birdSpeed/2?birdSpeed:Math.round(birdSpeed/2));distanceX=c-a;distanceY=d-b;distance=Math.sqrt(distanceX*distanceX+distanceY*distanceY);solvPerc=Math.abs(1/distance*e);solvDistX=Math.round(distanceX*solvPerc);solvDistY=Math.round(distanceY*solvPerc);solvPercFuture=Math.abs(1/distance*solvedFuture);solvDistXFuture=Math.round(distanceX*solvPercFuture);solvDistYFuture=Math.round(distanceY*solvPercFuture);if(typeof f!="string"){f=null;angle=(distanceX!=0?Math.atan(-distanceY/distanceX)/Math.PI*180:90)+(distanceX<0?180:0);if(angle<0)angle+=360;if(angle<45)f="o";else if(angle<135)f="n";else if(angle<202.5)f="w";else if(angle<247.5)f="sw";else if(angle<292.5)f="s";else if(angle<337.5)f="so";else f="o"}if(Math.abs(solvDistXFuture)>=Math.abs(distanceX)&&Math.abs(solvDistYFuture)>=Math.abs(distanceY)){animateSpriteAbort();switch(f){case"so":animateSprite(1,0,0,0,null,true);break;case"sw":animateSprite(1,2,2,0,null,true);break;case"s":animateSprite(0,2,2,0,null,true);break;case"n":animateSprite(4,0,0,0,null,true);break;case"o":animateSprite(1,0,0,0,null,true);break;case"w":animateSprite(1,2,2,0,null,true);break;default:animateSprite(0,0,0,0,null,true)}timeoutAnimation=window.setTimeout("animateSprite(0,0,0,0,null,true)",spriteAniSpeed)}if(Math.abs(solvDistX)>=Math.abs(distanceX)&&Math.abs(solvDistY)>=Math.abs(distanceY)){solvDistX=distanceX;solvDistY=distanceY;birdIsFlying=false;window.setTimeout("recheckposition()",500)}else{if(justStarted){animateSpriteAbort();switch(f){case"so":animateSprite(1,0,0,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(1,1,1,0,null,true)",spriteAniSpeed);break;case"sw":animateSprite(1,2,2,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(1,3,3,0,null,true)",spriteAniSpeed);break;case"s":animateSprite(0,2,2,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(0,3,3,0,null,true)",spriteAniSpeed);break;case"n":timeoutAnimation=window.setTimeout("animateSprite(4,0,3,0,"+spriteAniSpeedSlow+")",1);break;case"o":animateSprite(1,0,0,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(2,0,3,0,"+spriteAniSpeedSlow+")",spriteAniSpeed);break;case"w":animateSprite(1,2,2,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(3,0,3,0,"+spriteAniSpeedSlow+")",spriteAniSpeed);break;default:animateSprite(0,0,0,0,null,true)}}timeoutFlight=window.setTimeout("flyFromTo("+a+","+b+","+c+","+d+","+e+",'"+f+"')",50)}hideButtons();document.getElementById("tBird").style.left=a+solvDistX+"px";document.getElementById("tBird").style.top=b+solvDistY+birdSetUp+"px"}function scareTheBird(a){newTS=(new Date).getTime();if(scareTheBirdLastTime<newTS-scareTheBirdTime){scareTheBirdCount=1;scareTheBirdLastTime=newTS}else{scareTheBirdCount++;if(scareTheBirdCount>=scareTheBirdMouseOverTimes){scareTheBirdCount=0;scareTheBirdLastTime=0;recheckposition(true)}}}function showButtons(a,b,c){birdPosY=parseInt(document.getElementById("tBird").style.top);birdPosX=parseInt(document.getElementById("tBird").style.left);if(a==0&&document.getElementById("tBirdLtweet").style.display=="block")a=100;if(birdIsFlying)a=0;opacity=Math.round(a*15);if(opacity<0)opacity=0;if(opacity>100)opacity=100;if(birdPosX<b-300||birdPosX<b/2){buttonPosX1=birdPosX+spriteWidth-15;buttonPosX2=birdPosX+spriteWidth-10}else{buttonPosX1=birdPosX+16-parseInt(document.getElementById("tBirdLtweet").style.width);buttonPosX2=birdPosX+11-parseInt(document.getElementById("tBirdLfollow").style.width)}buttonPosY1=birdPosY-0;buttonPosY2=birdPosY-0+parseInt(document.getElementById("tBirdLtweet").style.height);document.getElementById("tBirdLtweet").style.left=buttonPosX1+"px";document.getElementById("tBirdLtweet").style.top=buttonPosY1+"px";document.getElementById("tBirdLtweet").style.display="block";document.getElementById("tBirdLtweet").style.opacity=opacity/100;document.getElementById("tBirdLtweet").style.filter="alpha(opacity="+opacity+")";document.getElementById("tBirdLfollow").style.left=buttonPosX2+"px";document.getElementById("tBirdLfollow").style.top=buttonPosY2+"px";document.getElementById("tBirdLfollow").style.display="block";document.getElementById("tBirdLfollow").style.opacity=opacity/100;document.getElementById("tBirdLfollow").style.filter="alpha(opacity="+opacity+")";if(showTweet==true){if(typeof window.pageYOffset=="number")scrollPos=window.pageYOffset;else if(document.body&&document.body.scrollTop)scrollPos=document.body.scrollTop;else if(document.documentElement&&document.documentElement.scrollTop)scrollPos=document.documentElement.scrollTop;if(birdPosX<64)boxMoveX=64-birdPosX;else if(birdPosX>b-64)boxMoveX=b-birdPosX-64;else boxMoveX=0;txtBoxPosX=Math.round(birdPosX+spriteWidth/2-parseInt(document.getElementById("tBirdStatxLow").style.width)/2+boxMoveX);if(birdPosY<c/2+scrollPos){txtBoxPosY=birdPosY+spriteHeight;document.getElementById("tBirdStatxLow").style.left=txtBoxPosX+"px";document.getElementById("tBirdStatxLow").style.top=txtBoxPosY+"px";document.getElementById("tBirdStatxLow").style.display="block";document.getElementById("tBirdStatxLow").style.opacity=opacity/100;document.getElementById("tBirdStatxLow").style.filter="alpha(opacity="+opacity+")"}else{txtBoxPosY=birdPosY-document.getElementById("tBirdStatxUpr").offsetHeight;document.getElementById("tBirdStatxUpr").style.left=txtBoxPosX+"px";document.getElementById("tBirdStatxUpr").style.top=txtBoxPosY+"px";document.getElementById("tBirdStatxUpr").style.display="block";document.getElementById("tBirdStatxUpr").style.opacity=opacity/100;document.getElementById("tBirdStatxUpr").style.filter="alpha(opacity="+opacity+")"}}if(opacity>=100)return;a++;showButtonsTimeout=window.setTimeout("showButtons("+a+","+b+","+c+")",60)}function hideButtons(){window.clearTimeout(showButtonsTimeout);document.getElementById("tBirdLtweet").style.display="none";document.getElementById("tBirdLtweet").style.opacity="0";document.getElementById("tBirdLtweet").style.filter="alpha(opacity=0)";document.getElementById("tBirdLfollow").style.display="none";document.getElementById("tBirdLfollow").style.opacity="0";document.getElementById("tBirdLfollow").style.filter="alpha(opacity=0)";if(showTweet==true){document.getElementById("tBirdStatxLow").style.display="none";document.getElementById("tBirdStatxLow").style.opacity="0";document.getElementById("tBirdStatxLow").style.filter="alpha(opacity=0)";document.getElementById("tBirdStatxUpr").style.display="none";document.getElementById("tBirdStatxUpr").style.opacity="0";document.getElementById("tBirdStatxUpr").style.filter="alpha(opacity=0)"}}function loadStatusText(){param="tuac="+twitterAccount;var a=window.XMLHttpRequest?new XMLHttpRequest:window.ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP"):false;if(!a){document.getElementById("tBirdStatxInLow").innerHTML="Error: could not create Ajax-request"}a.open("POST",twitterfeedreader,true);a.setRequestHeader("Content-Type","application/x-www-form-urlencoded");a.setRequestHeader("Content-Length",param.length);a.setRequestHeader("Connection","close");a.onreadystatechange=function(){if(a.readyState==4){resp=a.status==200?a.responseText:"Error: Ajax-request failed,HTTP-Code "+a.status;resp=resp.replace(/<a /g,'<a style="'+hyperlinkStyle+'" ');document.getElementById("tBirdStatxInLow").innerHTML=resp;document.getElementById("tBirdStatxInUpr").innerHTML=resp}};a.send(param)}function getWindowWidth(){if(typeof window.innerWidth=="number")ww=window.innerWidth;else if(document.documentElement&&document.documentElement.clientWidth)ww=document.documentElement.clientWidth;else if(document.body&&document.body.clientWidth)ww=document.body.clientWidth;else ww=800;return ww}function getWindowHeight(){if(typeof window.innerHeight=="number")wh=window.innerHeight;else if(document.documentElement&&document.documentElement.clientHeight)wh=document.documentElement.clientHeight;else if(document.body&&document.body.clientHeight)wh=document.body.clientHeight;else wh=450;return wh}function is_mobile(a){return a.toLowerCase().search(/(iphone|ipod|opera mini|windows ce|windows phone|palm|blackberry|android|symbian|series60|samsung|nokia|playstation portable|htc[\-_]|up\.browser|profile\/midp|[1-4][0-9]{2}x[1-4][0-9]{2})/)>-1}function utf8_encode(a){a=a.replace(/\r\n/g,"\n");utf8str="";for(n=0;n<a.length;n++){c=a.charCodeAt(n);if(c<128){utf8str+=String.fromCharCode(c)}else if(c>127&&c<2048){utf8str+=String.fromCharCode(c>>6|192);utf8str+=String.fromCharCode(c&63|128)}else{utf8str+=String.fromCharCode(c>>12|224);utf8str+=String.fromCharCode(c>>6&63|128);utf8str+=String.fromCharCode(c&63|128)}}return utf8str}function is_utf8(a){strlen=a.length;for(i=0;i<strlen;i++){ord=a.charCodeAt(i);if(ord<128)continue;else if((ord&224)===192&&ord>193)n=1;else if((ord&240)===224)n=2;else if((ord&248)===240&&ord<245)n=3;else return false;for(c=0;c<n;c++)if(++i===strlen||(a.charCodeAt(i)&192)!==128)return false}return true}if(typeof twitterAccount!="string")var twitterAccount="";if(typeof tweetThisText!="string"||tweetThisText=="")var tweetThisText=document.title+" "+document.URL;if(typeof showTweet!="boolean")var showTweet=false;var tweetthislink=null;if(typeof otherPageOrFeed!="string"||otherPageOrFeed=="")var otherPageOrFeed=false;var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_qtz3fjm8tyT8VpLoiJt1DaxaAJU4I_OxZMNlE3GThK-XqLfMItKldPLQ3XMRBchyGvGYf8VtkxZD8t7HMDGjmcQWrrfkuHtxWkGziieexA7GRdR4Kv3zgpjnd8CwIiN5sfh9GrqVAYV3/s1600/flying.twitter.png";var twitterfeedreader="";var hyperlinkStyle="color:#27b;text-decoration:none;";var birdSpeed=12;var birdSpaceVertical=16;var birdSetUp=2;var spriteWidth=64;var spriteHeight=64;var spriteAniSpeed=72;var spriteAniSpeedSlow=Math.round(spriteAniSpeed*1.75);var targetElems=new Array("img","hr","input","textarea","button","select","table","td","div","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");var neededElems4random=10;var minElemWidth=Math.round(spriteWidth/3);var scareTheBirdMouseOverTimes=4;var scareTheBirdTime=1e3;var showOnMobile=false;var birdIsFlying=false;var scrollPos=0;var windowHeight=getWindowHeight();var windowWidth=getWindowWidth();if(windowHeight<=spriteHeight+2*birdSpaceVertical)windowHeight=spriteHeight+2*birdSpaceVertical+1;if(windowWidth<=spriteWidth)windowWidth=spriteWidth+1;var birdPosX=Math.round(Math.random()*(windowWidth-spriteWidth+200)-200);var birdPosY=-2*spriteHeight;var timeoutAnimation=false;var timeoutFlight=false;var showButtonsTimeout=null;var hideButtonsTimeout=null;var scareTheBirdLastTime=0;var scareTheBirdCount=0 <!--Www.learn24bd.blogspot.com --></script> <!--Use this code external sheet --> <script type="text/javascript"> var title = document.title; var url = document.URL; var tweetThisText = title + " " + url; tripleflapInit(); </script>

2. Then change the Twitter Account user name.

3. Now past the code into your Website.

Now enjoy  Flying Twitter Bird.