:: Tutorial de E-mails ::

Starfield - Viagem Espacial

Para conseguir um efeito de espaço 3D, como neste exemplo, faça o seguinte:

Abra uma nova mensagem e clique em "Origem". Apague tudo o que encontrar e cole o seguinte código:

----------------------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2800.1106" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#000000>
<SCRIPT language=JavaScript>
<!-- Starfield - Kurt Grigg - http://www.btinternet.com/~kurt.grigg/javascript

n=20;// Number of stars!
n4=(document.layers);
ie=(document.all);

for (i=0; i < n; i++){
if (n4)
document.write("<layer name='stars"+i+"' top=0 left=0 bgcolor=#ffffff width=1 height=1></layer>");
else
document.write('<div id="stars'+i+'" style="position:absolute;width:1px;height:1px;background:#ffffff;font-size:1px">.</div>');
}

h=0;
w=0;
cy=0;
cx=0;

y=new Array();
x=new Array();
iy=new Array();
ix=new Array();
dir=new Array();
v=new Array();
ds=new Array();
ac=new Array();

for (i=0; i < n; i++){
iy[i]=Math.random()*h;
ix[i]=Math.random()*w;
y[i]=iy[i];
x[i]=ix[i];
v[i]=1.3;
ac[i]=0;
ds[i]=0;
}

function fly(){
h=(ie)?document.body.clientHeight:window.innerHeight;
w=(ie)?document.body.clientWidth:window.innerWidth;
sy=(ie)?document.body.scrollTop:window.pageYOffset;
sx=(ie)?document.body.scrollLeft:window.pageXOffset;
cy=Math.floor((h/2));
cx=Math.floor((w/2));
for (i=0; i < n; i++){
divs=(n4)?document.layers["stars"+i]:document.getElementById("stars"+i).style;

ay=y[i]-cy;
ax=x[i]-cx;
dir[i]=Math.atan2(ay,ax)*180/Math.PI;

v[i]+=ac[i];
v[i]+=(v[i]/10);

if (v[i] > 0.4 && v[i] < 0.5){
if (!n4){divs.fontSize=2;divs.height=2;divs.width=2}
else{divs.clip.height=2;divs.clip.width=2}
}
if (v[i] > 10){
if (!n4){divs.fontSize=2;divs.height=2;divs.width=2;}
else{divs.clip.height=2;divs.clip.width=2;}
}
if (v[i] > 20){
if (!n4){divs.fontSize=3;divs.height=3;divs.width=3}
else{divs.clip.height=3;divs.clip.width=3}
}
if (v[i] > 30){
if (!n4){divs.fontSize=5;divs.height=5;divs.width=5}
else{divs.clip.height=5;divs.clip.width=5}
}

y[i]+=v[i]*Math.sin(dir[i]*Math.PI/180);
x[i]+=v[i]*Math.cos(dir[i]*Math.PI/180);

if (y[i] < 0 || y[i] > h-Math.round(v[i]) || x[i] < 0 || x[i] > w-Math.round(v[i])){
iy[i]=Math.random()*h;
ix[i]=Math.random()*w;
y[i]=iy[i];
x[i]=ix[i];
dx=cy-y[i];
dy=cx-x[i];
ds[i]=Math.sqrt(dy*dy+dx*dx);
ac[i]+=(-(ds[i]*ds[i])+(160000))/(100000000);//?
v[i]=Math.floor(ds[i]/40);
if (!n4){divs.fontSize=1;divs.height=1;divs.width=1}
else{divs.clip.height=1;divs.clip.width=1}
}
divs.top=y[i]+sy;
divs.left=x[i]+sx;
}
setTimeout('fly()',10);
}
fly();
// -->
</SCRIPT>
</BODY></HTML>

----------------------------------------------------------------------------------------------------------------------------------------------------------------

Se você quiser alterar a cor do fundo, basta substituir o código de cor que deixei marcado em vermelho (mas tome cuidado, porque se você usar uma cor clara, o efeito não irá aparecer, a menos que você altere a cor das "estrelas" (deixei marcado em cinza).

Você pode também alterar o número de estrelas ( n=20;// Number of stars! e o número de "camadas" n4=(document.layers); conseguindo diferentes efeitos.

Se quiser, pode voltar à aba "Editar" e formatar o som e um fundo (use de preferência um fundo escuro). Você poderá criar muitas variações, dependendo do fundo que escolher.

Aqui você encontra a versão prontinha para e-mail desta dica. Está zipada no formato .eml (próprio para o Outlook Express)

(Dica adaptada por Lilian Russo a partir do script desenvolvido por Kurt Grigg.)


	.