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




.