VML fireworks script

JavaScriptBank

Bannato
26 Nov 2009
86
0
0
This is an interesting fireworks effect with the following attributes:

+ Makes use of VML support in IE5+ to render the stars. No graphics involved.
+ Uses conditional... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: CSS below for styling thescript, place it into HEAD section
CSS
Codice:
<STYLE type=text/css>BODY {
	OVERFLOW-X: hidden
}
v\:* {
	BEHAVIOR: url(#default#VML)
}
      </STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Use JavaScript code below to setup the script
JavaScript
Codice:
<!--[if IE ]>
<SCRIPT language=JavaScript>
// VML fireworks script By Jacco IJzerman , [email protected]
//Customize fireworks colors:
colors = new Array();
colors[0] = new Array('yellow', 'lime');
colors[1] = new Array('lime', 'green')
colors[2] = new Array('lime', 'blue');
colors[3] = new Array('lightyellow', 'purple');
colors[4] = new Array('lightblue', 'white');
colors[5] = new Array('blue', 'silver');
colors[6] = new Array('red', 'fuchsia');
colors[7] = new Array('yellow', 'red');

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]-->
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->






 
Discussioni simili
Autore Titolo Forum Risposte Data
VECTORdesign Risorse gratuite ADOBE Fireworks Webdesign e Grafica 1
Dexter_90 [AIUTO!] Problema Inserimento Menu Fireworks nell'Header WordPress 11
R Esportazione files di Fireworks in Dreamweaver Webdesign e Grafica 8
A creare slideshow con Fireworks Webdesign e Grafica 0
Z menu a cascata (o discesa) in Dhtml: l'uso di Fireworks Javascript 0
max1850 Fireworks: cambiare il colore di uno stile Webdesign e Grafica 9
G Fare gif animate con dissolvenza in Fireworks Webdesign e Grafica 2
G fireworks: ritagliare linee esterne al rettangolo Webdesign e Grafica 7
G Fireworks: come inserire griglia stampabile? Webdesign e Grafica 0
G Fireworks: come ridurre l'area senza perdita? Webdesign e Grafica 0
G Cambiare dimensione disegno fireworks senza incasinare i filtri? Webdesign e Grafica 4
G Con fireworks, come si sposta una selezione fra i livelli? Webdesign e Grafica 3
P consigliate fireworks Webdesign e Grafica 8
P Da fireworks a Dreamweaver [era: neofita] Webdesign e Grafica 4
T aiuto! bottoni in flash importati da fireworks Flash 1
C Aggiornamenti dal fireworks HTML e CSS 0
P dreamweaver e fireworks HTML e CSS 8
N fireworks Webdesign e Grafica 3
grottafelix Fireworks e jascript Webdesign e Grafica 0
G Script notifiche dekstop aiuto Javascript 0
G [PHP] Creare script di prenotazione con controllo disponibilità. PHP 7
P Passare solo alcuni parametri a script per CSV PHP 0
M Collegamento tra form html e script php PHP 4
F Script java elenco alfabetico non funziona Javascript 3
F Script non funzionante. Devo elencare in ordine alfabetico un elenco di nominativi, ma lo script non Javascript 2
P Script upload immagini jQuery 0
M Premature end of script headers PHP 1
Cosina script data aggiornamento pagina Javascript 1
R Distribuire uno Script "Facebook Auto Post" PHP 0
F Creazione script Tv Presentati al Forum 1
N Script elenco file HTML HTML e CSS 5
felino PHP e script generazione file excel PHP 2
MarcoGrazia Se non sai se riceverai da GET o da POST, puoi verificarlo e far scegliere allo script. Snippet PHP 0
Beppe2 Ritardare esecuzione script Javascript 2
R Primo script in PHP / CSS PHP 4
felino Script PHP per leggere un file JSON. autenticazione? PHP 4
T [a pagamento] programmatore PHP che mi aiuti a migrare gli script da vecchia versione PHP a nuova Offerte e Richieste di Lavoro e/o Collaborazione 1
T script jquery non funziona più dopo il passaggio a MVC jQuery 5
F Aiuto java script Javascript 2
Max 1 [PHP] Script che funziona in locale e non online PHP 16
O [PHP] inviare dati da form e script ajax PHP 0
P [PHP] Aggiungere un mio script a prestashop? PHP 10
D [Javascript] inserire uno script in un file php Javascript 6
Gabriele15497514 php testo errato durante la lettura del file txt quando lo script viene eseguito contemporaneamente PHP 3
R [Javascript] Aiuto su questo script Javascript 2
M [HTML] Stesso script su 2 blog CMS (Content Management System) 4
romeocharly [PHP] Script per rinominare in automatico le immagini inviate da ftp PHP 0
elpirata [Javascript] Lo script alle volte funzione altre volte no Javascript 0
A [PHP] Script con array con numeri che iniziano per 00 PHP 2
F [HTML] Failed script su coffee cookies HTML e CSS 1

Discussioni simili