Curso de Formatação Super 8

Crie seu próprio estilo de efeito fireworks - Script New Fireworks

Vou colocar aqui para vocês uma variação para o efeito de fireworks que enfeitam sem pesar e sem atrapalhar a visualização de imagens e fundos. O efeito é mesmo como o de fogos de artifício.

Podemos usar cores, alterar o tamanho e a forma de "explosão" do efeito.

Em:

amount=24 indicamos o número de "brilhinhos"

Deixei as cores todas indicadas em vermelho para facilitar. Você pode optar por usar cores iguais, em degradê ou bem variadas, dependendo do trabalho que está realizando, sobretudo da cor que predomina em seu back ou papel de carta.

Os itens:

Xpos=350;
Ypos=200;

indicam onde o efeito começa (X em relação à margem direita e Y em relação à altura)

explosionSize=100 refere-se ao tamanho da explosão (tamanho do círculo onde os brilhinhos aparecem)

style='position:absolute;top:0px;left:0px;width:1;height:1;background:#a2722c;font-size:1'> (os itens em azul indicam o tamanho do brilhinho - vc pode aumentar o tamanho e conseguir um efeito mais forte). Números muito altos (acima de 3) deixam o efeito estranho. Veja que o tamanho é indicado mais de uma vez, portanto, você pode deixar um círculo com tamanho 1, outro com tamanho2 e conseguir uma outra variação. Veja também as variações que conseguimos deixando o witch com um valor diferente do heigth e do font size.

setTimeout("Fireworks()",20);(indica o tempo que demora entre um círculo e outro aparecer)

As forma como a explosão acontece conseguimos com a alteração do step (quanto mais alto o valor, mais rápida a explosão acontece e um novo círculo de brilhinhos aparece.

step=5

<SCRIPT language=JavaScript>

<!-- script New fireworks - por Lili Russo

ns=(document.layers)?1:0;
amount=24;
if (ns){
for (i=0; i < amount; i++)
document.write("<LAYER NAME='nsstars"+i+"' LEFT=0 TOP=0 BGCOLOR='#ffffff' CLIP='0,0,1,1'></LAYER>");
}
else{
document.write("<div id='ieCov' style='position:absolute;top:0px;left:0px'>");
document.write("<div style='position:relative'>");
for (i=0; i < amount; i++)
document.write("<div id='iestars' style='position:absolute;top:0px;left:0px;width:2;height:2;background:#a2722c;font-size:2'></div>");
document.write("</div></div>");
}
Clrs=new Array('00e4ff','00ff00','00e4ff','004bff','ffa500','ffff00','00ff00','#a2722c','ff00ff')
sClrs=new Array('00e4ff','ff8500','ff8500','fff000','a2722c')
Xpos=350;
Ypos=200;
initialStarColor='258ec4';
step=5;
currStep=0;
explosionSize=100;
function Fireworks(){
var WinHeight=(document.layers)?window.innerHeight-100:window.document.body.clientHeight-100;
var WinWidth=(document.layers)?window.innerWidth-100:window.document.body.clientWidth-100;
var Yscroll=(document.layers)?window.pageYOffset:document.body.scrollTop;
for (i=0; i < amount; i++){
var layer=(document.layers)?document.layers["nsstars"+i]:iestars[i].style;
var randCol=Math.round(Math.random()*8);
var randSz=Math.round(Math.random()*2);
layer.top = Ypos + explosionSize*Math.sin((currStep+i*5)/3)*Math.sin(currStep/100)
layer.left= Xpos + explosionSize*Math.cos((currStep+i*5)/3)*Math.sin(currStep/100)
if (currStep < 110){
if (ns){layer.bgColor=initialStarColor;layer.clip.width=2;layer.clip.height=2}
else{layer.background=initialStarColor;layer.width=1;layer.height=2;layer.fontSize=2}
}
else{
if (ns){layer.bgColor=Clrs[randCol];layer.clip.width=randSz;layer.clip.height=randSz}
else{layer.background=Clrs[randCol];layer.width=randSz;layer.height=randSz;layer.fontSize=randSz}
}
}
if (currStep > 220)
{
currStep=0;
Ypos = 50+Math.round(Math.random()*WinHeight)+Yscroll;
Xpos = 50+Math.round(Math.random()*WinWidth);
for (i=0; i < sClrs.length; i++)
{
var newIcol=Math.round(Math.random()*i);
}
initialStarColor=sClrs[newIcol];
explosionSize=Math.round(80*Math.random()+100);
}
currStep+=step;
setTimeout("Fireworks()",20);
}
Fireworks();

</SCRIPT>

O ideal aqui é ir variando os valores, tomando sempre muito cuidado com os sinais que devem ser respeitados para o código funcione.

Tarefa

Crie um e-mail usando o efeito de fogos de artifício com variações a seu gosto e de acordo com o back escolhido. Insira uma imagem que combine com seu back. Formate a mensagem com borda e barra de rolagem colorida, insira uma música e escreva um pequeno texto.

Envie ao grupo.

Bom trabalho!

Endereço do grupo: tutorial_emails@yahoogrupos.com.br

Lembre-se de indicar no campo Assunto: Nome do aluno, Nível e Número da lição. Caso a lição tenha sido refeita, inclua a palavra "refeita".

Lição elaborada por Lilian Russo

Lilian Russo - Todos os Direitos Reservados - ©2002/2008