HTML

Script - Exemplos - Fogos de artifício

Esse script exibe um efeito colorido que lembra fogos de artifício e independe de ação do internauta.

Abaixo as cores tem seus códigos evidenciados em verde.

Verifique nessa página.

Código

//Fireworks - http://www.btinternet.com/~kurt.grigg/javascript

if ((document.getElementById) &&
window.addEventListener || window.attachEvent){

(function(){

var showerCol = new Array('#000000','#ff0000','#000000','#00ff00','#ff00ff','#ffffff','#ffa500','#000000','#fff000');
var launchCol = new Array('#ffa500','#00ff00','#ffaaff','#fff000','#ffffff');
var launchColour = "#00ff00";
var rs = 30;
var y = 200;
var x = 200;
var h;
var w;
var xs = 190;
var t = null;
var ss = 1;
var e = 360/14;
var f = new Array();
var c1 = -1;
var c2 = 5;
var r;

var pix = "px";

var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);

var o;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var n = 14;
var idx = 1;

for (i = 0; i < n; i++){
if ( document.getElementById(idx+i) ){
idx = (idx+=(n));
}
}

for (i = 0; i < n; i++){
document.write('<div id='+(idx+i)+' style="position:absolute;top:0px;left:0px;'
+'height:1px;width:1px;font-size:1px;background-color:'+launchColour+'"><\/div>');
}

if (domWw) r = window;
else{
if (document.documentElement &&
typeof document.documentElement.clientWidth == "number" &&
document.documentElement.clientWidth != 0)
r = document.documentElement;
else{
if (document.body &&
typeof document.body.clientWidth == "number")
r = document.body;
}
}

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 wndwsz(){
if (domWw){
h = r.innerHeight;
w = r.innerWidth;
}
else{
h = r.clientHeight;
w = r.clientWidth;
}
o = (w >= h)?h:w;
}

function rst(){
c1 = 0;
launchColour = launchCol[Math.floor(Math.random() * launchCol.length)];
xs = Math.round(100+Math.random() * (o/4));
y = xs + Math.round(Math.random() * (h-(xs*2.2))) + scrl(0);
x = xs + Math.round(Math.random() * (w-(xs*2.2))) + scrl(1);
ss = 1;
for (i=0; i < n; i++){
f[i].backgroundColor = launchColour;
f[i].width = ss + pix;
f[i].height = ss + pix;
f[i].fontSize = ss + pix;
}
dsply();
}

function dsply(){
c1 += c2;
t = setTimeout(dsply,rs);
for (i =0; i < n; i++){
f[i].top = y + xs * Math.sin(i*e*Math.PI/180) * Math.sin(c1/100) + pix;
f[i].left= x + xs * Math.cos(i*e*Math.PI/180) * Math.sin(c1/100) + pix;
if (c1 > 100){
ss = (xs < 150)?1:Math.round(1+Math.random()*2);
f[i].backgroundColor = showerCol[Math.floor(Math.random()*showerCol.length)];
f[i].width = ss + pix;
f[i].height = ss + pix;
f[i].fontSize = ss + pix;
}
}
if (c1 > 160){
clearTimeout(t);
rst();
}
}

function init(){
wndwsz();
for (i = 0; i < n; i++){
f[i] = document.getElementById(idx+i).style;
}
var strt = Math.floor(500+Math.random()*2000);
setTimeout(dsply,strt);
}

if (window.addEventListener){
window.addEventListener("resize",wndwsz,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",wndwsz);
window.attachEvent("onload",init);
}

})();
}//End.

Como colocar o código na página

1. Usar o arquivo fireworks.js:

a. Criar fireworks.js com o conteúdo acima
(criar como fireworks.txt e renomear para js)

ou

b. Copiar o arquivo fireworks comprimido (zip) clicando aqui. Descompactá-lo e deixar o arquivo js resultante com os outros arquivos que compõem a página

Em 1a ou 1b, colocar no código da página, em qualquer ponto entre <body> e </body>:

<script type="text/javascript" src="fireworks.js"></script>

ou

2. Copiar o código acima diretamente na página, em qualquer ponto entre <body> e </body>.

Veja detalhes sobre cores e HTML aqui

Exemplos: Ave Maria 3 - Você sabe de onde eu venho? - Deus - Todo o dia é ano novo

Nota: Esse script funciona tanto usando o Mozilla Firefox, Mozilla suite, o Netscape, o Opera, como o Internet Explorer.

Esse script foi recebido por e-mail ou gravado a partir de sites visitados.
Desconheço a existência de quaisquer restrições ao seu uso não comercial.
Caso tenha registro, solicito ao detentor entrar em contato.

Este "site", destinado prioritariamente aos alunos de Fátima Conti,
pretende auxiliar quem esteja começando a se interessar por internet,
segue as regras da FDL (Free Documentation Licence),
computadores e programas, estando em permanente construção.
Sugestões e comentários são bem vindos.
Se desejar colaborar, clique aqui.
Agradeço antecipadamente.

Deseja enviar essa página?

Se você usa um programa de correio eletrônico devidamente configurado e tem
um e-mail pop3, clique em "Enviar página" (abaixo) para abrir o programa.
Preencha o endereço do destinatário da mensagem.
E pode acrescentar o que quiser.
(Se não der certo, clique aqui para saber mais).

Enviar página

Se você usa webmail copie o endereço abaixo

http://www.cultura.ufpa.br/dicas/htm/htm-scri9.htm

Acesse a página do seu provedor. Abra uma nova mensagem.
Cole o endereço no campo de texto.
Preencha o endereço do destinatário.
E também pode acrescentar o que quiser.

Última alteração: 26 mai 2008