topical media & game development

talk show tell print

graphic-javascript-effect-fireworks-02-effect.htm / htm



  
  <!-- TWO STEPS TO INSTALL FIREWORKS 2:
  
    1.  Copy the coding into the HEAD of your HTML document
  
    2.  Add the last code into the BODY of your HTML document  -->
  
  <!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
  
  <HEAD>
  
  <!-- This script and many more are available free online at -->
  
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- Original:  Jacco IJzerman (j.ijzerman1@chello.nl ) -->
  
  <!-- Web Site:  http://variomatic.quickhost.nl -->
  
  <!--[if IE ]>
  
  <style type="text/css">
  
  body { overflow: hidden; }
  
  v * { behavior: url(#default#VML); }
  
  </style>
  
  <![endif]-->
  
  </HEAD>
  
  <!-- STEP TWO: Copy this code into the BODY of your HTML document  -->
  
  <BODY>
  
  <!-- This script and many more are available free online at -->
  
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- Original:  Jacco IJzerman (j.ijzerman1@chello.nl ) -->
  
  <!-- Web Site:  http://variomatic.quickhost.nl -->
  
  <!--[if IE ]>
  
  <script language="JavaScript">
  
   
  
  colors = new Array();
  
  // Define your own color combinations 
  
  colors[0] = new Array('yellow', 'lime');
  
  colors[1] = new Array('silver', 'green')
  
  colors[2] = new Array('silver', 'blue');
  
  colors[3] = new Array('silver', 'purple');
  
  colors[4] = new Array('purple', 'white');
  
  colors[5] = new Array('blue', 'silver');
  
  colors[6] = new Array('red', 'fuchsia');
  
  colors[7] = new Array('yellow', 'red');
  
  // Define the maximum number of fire arrows
  
  maximum = 1000;
  
  vmlobj=''; 
  
   for(i = 0; i < 12; i++){  
  
   vmlobj += '<div id="ster'+i+'" style="position:absolute; left:-50px; top-50px; visibility:hidden; z-index:50;">';
  
   vmlobj += '<v:shape style="width:15px; height:15px;" fillcolor="yellow" coordorigin="0,0" coordsize="200 200">';
  
   vmlobj += '<v:path v="m 8,65 l 72,65, 92,11, 112,65, 174,65, 122,100, 142,155,92,121, 42,155, 60,100 x e"/>';
  
   vmlobj += '<v:stroke on="false" /></v:shape></div>';
  
   }
  
  document.write(vmlobj); vmlobj = null;
  
  aantal = 0;
  
  function begin()
  
  {
  
  try {
  
   if(aantal == maximum){ return;}
  
   kleurschema = Math.floor(Math.random() * colors.length);
  
   posLinks = Math.floor(Math.random() * (document.body.clientWidth - 180));
  
   posLinks = (posLinks < 170)? 170: posLinks;
  
   posBoven = Math.floor(Math.random() * (document.body.clientHeight - 180));
  
   posBoven = (posBoven < 170)? 170: posBoven;
  
   straal = 0; uiteen = true; teller = 1; flikkereffect = false;
  
   for(var i = 0; i < 12; i++){
  
   document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][0]);
  
   document.getElementById('ster'+i).style.visibility = 'hidden'; // 5.0 fix
  
   document.getElementById('ster'+i).style.left = posLinks;
  
   document.getElementById('ster'+i).style.top = posBoven;
  
   }
  
   document.getElementById('ster0').style.top = (document.body.clientHeight - 20); 
  
   document.getElementById('ster0').style.visibility = 'visible';
  
   omhoog();
  
  } catch(e){}
  
  }
  
  function omhoog()
  
  {
  
  try {
  
    positie = parseInt(document.getElementById('ster0').style.top);
  
    if(positie > posBoven){
  
    document.getElementById('ster0').style.top = (positie - 25); 
  
    setTimeout('omhoog()', 50);
  
    } else {
  
     for(i = 1; i < 12; i++){
  
     document.getElementById('ster'+i).style.top = positie;
  
     document.getElementById('ster'+i).style.visibility = 'visible';
  
     }  
  
    uiteenspatten();
  
    }
  
  } catch(e){}
  
  }
  
  function uiteenspatten()
  
  {
  
  try {
  
   if(straal > 120 && straal % 10 == 0){ 
  
   flikkereffect = true;
  
   teller = (teller == colors[kleurschema].length)? 0: (teller+1);
  
   }
  
   for(var i = 0; i < 12; i++){
  
   var hoek = i * 30; 
  
   var piHoek = Math.PI - Math.PI / 180 * hoek;
  
   var links = posLinks + Math.round(straal * Math.sin(piHoek)); 
  
   var boven = positie + Math.round(straal * Math.cos(piHoek));
  
   document.getElementById('ster'+i).style.left = links;
  
   document.getElementById('ster'+i).style.top = boven;
  
    if(flikkereffect){
  
    document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][teller]);
  
    }
  
   }
  
   if(straal < 160 && uiteen){
  
   straal += (straal < 120)? 10: 5;
  
   setTimeout('uiteenspatten()', 50);
  
   }
  
   else if(straal > 120){
  
   uiteen = false; straal -= 5;
  
   setTimeout('uiteenspatten()', 50);
  
   }
  
   else if(straal <= 120){
  
    for(var i = 0; i < 12; i++){
  
    document.getElementById('ster'+i).style.visibility = 'hidden';
  
    }
  
   aantal++;
  
   setTimeout('begin()', 500);
  
   }
  
  } catch(e) {}
  
  }
  
  window.onload=begin;
  
  </script>
  
  <![endif]-->
  
  <p><center>
  
  <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
  
  by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
  
  </center><p>
  
  <!-- Script Size:  4.58 KB -->
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.