Animation: fade in and fade out : Fade « Ajax Layer « JavaScript DHTML






Animation: fade in and fade out

//Smoke Ring - http://www.btinternet.com/~kurt.grigg/javascript
/*
Paste this link as the last thing on your page, just before </body></html>

<script type="text/javascript" src="smokering.js"></script>


Make sure the smokering.js file and the ring image, or your chosen image, are 
in/uploaded to the same directory/folder as the web page using the script!
*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Smoke Ring</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">

<style type="text/css">
<!--
body{
background:#000000;
}
//-->
</style>

</head>
<body>


<script type="text/javascript">
//Smoke Ring - http://www.btinternet.com/~kurt.grigg/javascript

(function(){
var doesFilters = ((document.firstChild) && 
document.firstChild.filters);
var modernBrowser = ((document.getElementById) 
&& window.addEventListener || window.attachEvent);
if (doesFilters && modernBrowser){



//Configure here!

var theImage = new Image();
theImage.src = "http://www.java2s.com/style/logo.png"; //Put any image here.

/*Image height-width. A non-square image can be  
used but script runs smoother if it is square*/

var imgH = 150;  //height.
var imgW = 150;  //width. 

var runSpeed = 30;   //setTimeout speed.

//End.

var eqDims = (imgH==imgW);
var r,h,w,y,x,fadeStep,fadeFrom,expH,expW,curH,curW,temp;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('img').length;

document.write("<img id='ring"+idx+"' src='"+theImage.src+"' alt='' style='"
+"position:absolute;top:-200px;left:-200px;height:"+imgH+"px;width:"+imgW+"px' />");

if (domWw) r = window;
else{ 
  if (d.documentElement && 
  typeof d.documentElement.clientWidth == "number" && 
  d.documentElement.clientWidth != 0)
  r = d.documentElement;
 else{ 
  if (d.body && 
  typeof d.body.clientWidth == "number")
  r = d.body;
 }
}


function winsize(){
if (domWw){
  h = r.innerHeight; 
  w = r.innerWidth;
 }
 else{
  h = r.clientHeight; 
  w = r.clientWidth;
 } 
}


function scrl(yx){
var y,x;
if (domSy){
 y = r.pageYOffset;
 x = r.pageXOffset;
 }
else{
 y = r.scrollTop;
 x = r.scrollLeft;
 }
return (yx == 0)?y:x;
}


function rst(){
y = Math.floor((imgH/2) + Math.random() * (h-imgH)) + scrl(0);
x = Math.floor((imgW/2) + Math.random() * (w-imgW)) + scrl(1);
fadeStep = 3;
fadeFrom = 100;
expH = (eqDims)?1:(1 * imgH) / 100;
expW = (eqDims)?1:(1 * imgW) / 100;
curH = 0; 
curW = 0; 
}


function SmokeRing(){
curH += expH;
curW += expW;
if (curH > imgH/4){ 
 fadeFrom -= fadeStep;
}
if (curH*2 >= imgH){
 rst();
}
 temp.top = y-curH+pix;
 temp.left = x-curW+pix;
 temp.height = (curH*2)+pix;
 temp.width = (curW*2)+pix;
 temp.filter = "alpha(opacity="+fadeFrom+")";
 setTimeout(SmokeRing,runSpeed); 
}


function init(){
temp = document.getElementById("ring"+idx).style;
winsize();
rst();
var strt = Math.floor(500+Math.random()*2000);
setTimeout(SmokeRing,strt);
}


if (window.addEventListener){
 window.addEventListener("load",init,false);
 window.addEventListener("resize",winsize,false);
 }  
else if (window.attachEvent){
 window.attachEvent("onload",init);
 window.attachEvent("onresize",winsize);
 }
}//End 
})();
</script>


<p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p>
<p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p>
<p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p>



</body>
</html>
           
       








Related examples in the same category

1.Fade Color Demo
2.Animation Example - Fade