As a special project at Institutional Web Support Services, I had the opportunity to alter the iCampus login page for the 4th of July weekend. The iCampus page now features a fireworks display.
As an added “Easter egg”, the logo at the top-left corner of the screen is now a roll-over link (see images below). The link itself has different images for up, over and down states. The new logo is of a firework/rocket in place of the “i” of the original white iCampus logo. At its up state, the rocket has its wick wrapped around itself and the spark has been placed where the dot of the “i” used to be. On hover/over, the wick is shorter and the spark is nearing the rocket. A message also pop’s up reading, “Click for the Grand Finale!”. Upon clicking an additional sequence of randomly timed fireworks go off at the top of the screen. Below I have some imges and finally a tutorial on how to make fireworks for your site!
Image copyright IWSS at Illinois State University.
If you wanna check out the page, just go to the Illinois State University iCampus login page (this will only be up for the 2011 4th of July weekend).
The Tutorial
- First check out this site, http://www.schillmania.com/projects/fireworks/. This site has all the files needed for download.
- Play with the settings on this site and launch fireworks to get a sense of what kind of explosions you can create.
- If you want to strip down the HTML file to the bare essentials, copy and paste the code in the sections below.
The Code
-
Resources for Header
After unzipping the download above and placing all the necessary files in their proper locations, you can load these scripts with this code in the HEADER tag.
<head>
<link rel="stylesheet" type="text/css" href="style/fireworks.css" media="screen" />
<!--script type="text/javascript" src="script/debug.js"></script-->
<!--script type="text/javascript" src="script/soundmanager.js"></script-->
<script type="text/javascript" src="script/fireworks.js"></script>
</head> -
Comment for Help
This commented out code is useful in knowing how the createFirework function can be called. Knowing what each variable does is helpful in creating that perfect show.
<!--
<code>
createFirework(<span id="function-example">nRadius,nParticles,nCircles,burstType,startX,startY,burstX,burstY)</span>);
</code>
--> -
Creating a Fireworks Show on Page Load
Luckily, the BODY tag of a document has an event object called “onload” that allows you to run a script when the BODY of an HTML document finished loading. We can then add a firework script to launch a random sequence of explosions…
<body onload="var r=4+parseInt((Math.random()*1)+100);for(var i=r; i--;){setTimeout('createFirework(8,(Math.random()*15)+15,(Math.random()*3)+1,1,null,95,(Math.random()*85)+10,(Math.random()*10)+1,Math.random()>0.5,false, false)',(i+1)*(1+parseInt(Math.random()*1000)+2000));}return false">
In this code a value with “null” returns a random number, however if you want to create a more controlled number you have to use a math operator. “(Math.random()*5)+100)” means… you will return a random number between 0-4 and then add 100 to it. The possible outcomes are then 100, 101, 102, 103 and 104. Most of the x-y variables in this code accept only a 0-100 value because they are based on percentages of the screen. Keep that in mind when manipulating the math. -
Make a Click-able Link Launch a Firework Show
Just like the BODY tag, an A tag has a lot of “events” that can launch scripts. It only makes sense to then use “onclick” to launch a Fireworks Script.
<ul><li><a href="#" onclick="var r=4+parseInt(Math.random()*10);for(var i=r; i--;){setTimeout('createFirework(10,(Math.random()*15)+15,(Math.random()*3)+1,1,null,95,(Math.random()*85)+10,(Math.random()*10)+1,Math.random()>0.5,true)',(i+1)*(1+parseInt(Math.random()*800)));}return false" title="The Grand Finale!">Grand Finale!</a></li></ul> -
Important Div’s
The Fireworks JavaScript also looks for certain divs that are required in order for the fireworks to launch. Just place this code inside the body. It can go pretty much anywhere, but in this example I have chosen to place this code at the end of the HTML document.
<div id="sound">
</div>
<div id="fireworks-template">
<div id="fw"></div>
<div id="fp"><img src="image/particles.gif" alt="" /></div>
</div>
<div id="fireContainer"></div>
</body>
</html>
Testing
From here on out just use the Fireworks.js Hompage for testing firework variables and don’t forget the code below. It is a helpful guide…
createFirework(nRadius,nParticles,nCircles,burstType,startX,startY,burstX,burstY)
Chris
Nice implementation and nice tut. You should consider setting up a dummy page on your site to preserve it. You know, the internet is forever.
Thanks for the comment Ray.
I was planning on putting some eater eggs on this page and the homepage for the actual 4th of July :) So come back and check it out! Glad you liked it.
Really well designed website -)
@Way2Learn
Are you referring to geebArt.com or the iCampus page? Thanks for the comment!
thanks for share this coding
I was recommended this web site by my cousin. I am not sure whether this
post is written by him as nobody else know
such detailed about my difficulty. You are amazing! Thanks!
No Problem. Let me know if this tutorial still works. It has been a long time since I have tried it. Thanks for stopping in!