Opacity effect

[Total: 0    Average: 0/5]

Spirls in your logo.

Head Code:

<script> 
// (c) 2002 xabi@i.am 
var STEPS = 30; // Frames 
var ITIMER = 80; // Speed (miliseconds) 
var SPINS = 1; // Animation spins 
var MAXRADIUS = 300; // Radius (Pixels) 
var MAXIMAGES = 3; // Image Number 
var IMAGE = 'http://www.js-x.com/images/js_x_logo.png'; 
var LINK = 'mailto:xabi@i.am'; 

var iFullCircle = 2 * Math.PI; 
var iCenterX = 0; 
var iCenterY = 0; 
var iStep = 0; 
var bRunning = 1; 
var bIsIE = (document.all); 
var iRadio; 

function resizePage() { 
if (bIsIE) { 
iCenterX = (document.body.clientWidth-document.images["img1"].width)/2; 
iCenterY = (document.body.clientHeight-document.images["img1"].height)/2; 
if (!bRunning) { 
for (var iTmp=1; iTmp<=MAXIMAGES; iTmp++) { 
document.getElementById("div" + iTmp).style.left = iCenterX; 
document.getElementById("div" + iTmp).style.top = iCenterY; 
} 
} 
} 
} 

function slide() { 
if (iStep < STEPS) { 
iStep++; 
iRadio = MAXRADIUS - ((MAXRADIUS/STEPS) * iStep); 
iAngulo = ((iFullCircle*SPINS) / STEPS) * iStep; 
for (var iTmp=1; iTmp<=MAXIMAGES; iTmp++) { 
document.getElementById("div" + iTmp).style.left = iCenterX + iRadio * Math.cos((iFullCircle/MAXIMAGES)*iTmp + iAngulo); 
document.getElementById("div" + iTmp).style.top = iCenterY + iRadio * Math.sin((iFullCircle/MAXIMAGES)*iTmp + iAngulo); 
document.images['img' + iTmp].filters.alpha.opacity = (100/STEPS) * iStep; 
} 
setTimeout("slide()", ITIMER); 
} else { 
bRunning = 0; 
} 
} 

function initThis() { 
if (bIsIE) { 
iCenterX = (document.body.clientWidth-document.images["img1"].width)/2; 
iCenterY = (document.body.clientHeight-document.images["img1"].height)/2; 
for (var iTmp=1; iTmp<=MAXIMAGES; iTmp++) { 
document.getElementById("div" + iTmp).style.left = iCenterX + MAXRADIUS * Math.cos((iFullCircle/MAXIMAGES)*iTmp); 
document.getElementById("div" + iTmp).style.top = iCenterY + MAXRADIUS * Math.sin((iFullCircle/MAXIMAGES)*iTmp); 
document.getElementById("div" + iTmp).style.visibility = "visible"; 
} 
iRadio = MAXRADIUS; 
slide(); 
} 
} 
</script> 

Body Code:

<script> 
if (bIsIE) { 
for (var iTmp=1; iTmp<=MAXIMAGES; iTmp++) { 
document.write('<div id="div' + iTmp + '" style="position:absolute; z-index:' + (100 + iTmp) + '; left: 0px; top: 0px; visibility: hidden"><a href="' + LINK + '"><img src="' + IMAGE + '" name="img' + iTmp + '" style="filter:alpha(opacity=100)" border="0"></a></div>n'); 
} 
} else { 
document.write('<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">n'); 
document.write('<tr><td align="center" valign="middle">n'); 
document.write('<a href="' + LINK + '"><img src="' + IMAGE + '" name="img5" border="0"></a>n'); 
document.write('</td></tr>n'); 
document.write('</table>n'); 
} 
</script> 
<HR>
<a href="javascript:initThis()">Start this script</a>
<BR>Put this on your code to have it auto start:<BR>
<dir>
&lt;body onload="initThis()" onresize="resizePage()"&gt;
</dir>

Times Viewed: 5

Leave a Reply

Your email address will not be published. Required fields are marked *