
Letras coloridas em movimento
Para conseguir um efeito de letras que aparecem coloridas, como
se pode observar neste
exemplo, faça o seguinte:
1. Abra uma nova mensagem
2. Clique na aba "Origem"
3. Cole o seguinte código antes da tag </body>:
Obs.: As palavras que estão em vermelho é que devem
ser substituídas pela mensagem que você quer que apareça.
----------------------------------------------------------------------------------------------------------------------------------------------------------------
<SCRIPT language=JavaScript>
<!-- Original: WarpGear Software (jsfader@warpgear.com) -->
<!-- Web Site: http://www.warpgear.com/developer -->
<!-- This script and many more are available free online at
-->
<!-- The JavaScript Source!! http://javascript.internet.com
-->
<!-- Begin
// texts:
// Your messages wich may contain regular html tags but
// must at least contain: [ <font color='{COLOR}'> ]
// Use single quotes [ ' ] in your html only. If you need
// a double quote in the message itself use an escape
// sign like this: [ \" ] (not including the brackets)
var texts = new Array(
"<font size='+4' color='{COLOR}'
face='Comic Sans Ms'><strong>Olá!
Aqui você encontra um código para este efeito.</strong></font>",
"<font size='+4' color='{COLOR}'
face='Comic Sans Ms'><strong>Este
script faz com que as palavras apareçam.</strong></font>",
"<font size='+4' color='{COLOR}'
face='Comic Sans Ms'><strong>Você
pode escrever mensagens variadas.</strong></font>",
"<font size='+4' color='{COLOR}'
face='Comic Sans Ms'><strong>Vamos
ver o código, então...</font>",
"<font size='+4' color='{COLOR}'
face='Comic Sans Ms'><strong>Espero
que você goste.</strong></font>",
"<font size='+4' color='{COLOR}'
face='Comic Sans Ms'><strong>Um abraço
da Lili</strong></font></a>");
var bgcolor = "#000000";
// background color, must be valid browser hex color (not color
names)
var fcolor = "#FF8000";
// foreground or font color
var steps = 20; // number of steps to fade
var show = 500; // milliseconds to display message
var sleep = 30; // milliseconds to pause inbetween messages
var loop = true; // true = continue to display messages, false
= stop at last message
// Do Not Edit Below This Line
var colors = new Array(steps);
getFadeColors(bgcolor,fcolor,colors);
var color = 0;
var text = 0;
var step = 1;
// fade: magic fader function
function fade() {
// insert fader color into message
var text_out = texts[text].replace("{COLOR}", colors[color]);
// texts should be defined in user script, e.g.: var texts = new
Array("<font color='{COLOR}' sized='+3' face='Arial'>howdy</font>");
// actually write message to document
if (document.all) fader.innerHTML = text_out; // document.all =
IE only
if (document.layers) { document.fader.document.write(text_out);
document.fader.document.close(); } // document.layers = Netscape
only
// select next fader color
color += step;
// completely faded in?
if (color >= colors.length-1) {
step = -1; // traverse colors array backward to fade out
// stop at last message if loop=false
if (!loop && text >= texts.length-1) return; // loop
should be defined in user script, e.g.: var loop=true;
}
// completely faded out?
if (color == 0) {
step = 1; // traverse colors array forward to fade in again
// select next message
text += 1;
if (text == texts.length) text = 0; // loop back to first message
}
// subtle timing logic...
setTimeout("fade()", (color == colors.length-2 &&
step == -1) ? show : ((color == 1 && step == 1) ? sleep
: 50)); // sleep and show should be defined in user script, e.g.:
var sleep=30; var show=500;
}
// getFadeColors: fills Colors (predefined Array)
// with color hex strings fading from ColorA to ColorB
// note: Colors.length equals the number of steps to fade
function getFadeColors(ColorA, ColorB, Colors) {
len = Colors.length;
// strip '#' signs if present
if (ColorA.charAt(0)=='#') ColorA = ColorA.substring(1);
if (ColorB.charAt(0)=='#') ColorB = ColorB.substring(1);
// substract rgb compents from hex string
var r = HexToInt(ColorA.substring(0,2));
var g = HexToInt(ColorA.substring(2,4));
var b = HexToInt(ColorA.substring(4,6));
var r2 = HexToInt(ColorB.substring(0,2));
var g2 = HexToInt(ColorB.substring(2,4));
var b2 = HexToInt(ColorB.substring(4,6));
// calculate size of step for each color component
var rStep = Math.round((r2 - r) / len);
var gStep = Math.round((g2 - g) / len);
var bStep = Math.round((b2 - b) / len);
// fill Colors array with fader colors
for (i = 0; i < len-1; i++) {
Colors[i] = "#" + IntToHex(r) + IntToHex(g) + IntToHex(b);
r += rStep;
g += gStep;
b += bStep;
}
Colors[len-1] = ColorB; // make sure we finish exactly at ColorB
}
// IntToHex: converts integers between 0-255 into a two digit hex
string.
function IntToHex(n) {
var result = n.toString(16);
if (result.length==1) result = "0"+result;
return result;
}
// HexToInt: converts two digit hex strings into integer.
function HexToInt(hex) {
return parseInt(hex, 16);
}
// body tag must include: onload="fade()" bgcolor="#000000"
where bgcolor equals bgcolor in javascript above
// End -->
</SCRIPT>
<!-- STEP TWO: Insert the onLoad event handler into your BODY
tag --></HEAD>
<BODY bgColor=#000000 background="" onload=fade()>
<DIV id=fader
style="LEFT: 50px; WIDTH: 600px; POSITION: absolute; TOP:
35px; TEXT-ALIGN: center"></DIV>
<P>
<CENTER><!-- Script Size: 5.22 KB --></CENTER>
----------------------------------------------------------------------------------------------------------------------------------------------------------------
Você pode alterar o tamanho da fonte, mudando os números
que deixei em azul '4' no código.
Pode também variar o tamanho da fonte e conseguir um efeito
diferente, com mensagens que aparecem com letras de tamanhos diferentes.
Aqui você
encontra a versão prontinha para e-mail dessa tabela. Está
zipada no formato .eml
(próprio para o Outlook Express)
(Dica adaptada por Lilian Russo)
Lilian Russo - Todos os Direitos Reservados - ©2002/2008
|