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
