:: Tutorial de E-mails ::

Texto em curvas

Para conseguir um efeito de texto em curvas com movimento, 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:

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

<!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=#fff0ff
<DIV><FONT face="Comic Sans MS"><FONT size=4><FONT
color=#844672>
<SCRIPT language=JavaScript1.2>

if (document.all)
document.write
// I borrowed this script. Thanks!

// globals
var initialx, initialy, scrolltext;
var frame = 0, frame2 = 0.5;
var amplitude1 = 50, amplitude2 = 30;
var offset = 0.2, speed = 0.2, speed2 = 0.35;
var offset2 = 0.6;
var scrollspeed = 3;
var charwidth = 30;

var twopi = Math.PI * 2;
var chracters, position, numvisible, nextchar, firstchar;
var skipsteps = 1;
var delaytimer = 0;
var interval;

// function to create sine scroller
function sinescroll (x, y, value, number_of_chars)
{
// setup globals
scrolltext = new String(value);
initialx = x;
initialy = y;
numvisible = number_of_chars;
nextchar = numvisible;
firstchar = 0;

// create fixed-size arrays of characters and positions
characters = new Array(numvisible);
position = initialx;

// write DIVs to hold characters
for (var i = 0; i < numvisible; i++)
{
document.write('<DIV ID="character" STYLE="position:absolute;top:',
initialy, ';left:-10000', //(initialx + i * charwidth),
';width=', charwidth, ';height=30;" ><p class=scroll>',
scrolltext.charAt(i), '</p></DIV>');
}
}

// animation function
function step ()
{
// increment counters
frame += speed;
frame2 += speed2;

// delay timer
if (delaytimer > 0)
{
delaytimer--;
}
else
{
// update position
position -= scrollspeed;
}

// check for 'offscreen'
if (position < (initialx - charwidth))
{
while (scrolltext.charAt(nextchar) == '|')
{
delaytimer += 90;
nextchar++;
}

// set nextchar into characters array
characters[firstchar].innerHTML = '<p class=scroll>' + scrolltext.charAt(nextchar) + '</p>';

// update nextchar
nextchar++;

// check for wrap-around
if (nextchar >= scrolltext.length)
{
nextchar = 0;
}

// change position and counters by offset
position += charwidth;
frame += offset;
frame2 += offset2;

// update firstchar
firstchar++;

if (firstchar >= numvisible)
{
firstchar = 0;
}
}

// wrap-around counters
if (frame > twopi) frame -= twopi;
if (frame2 > twopi) frame2 -= twopi;

// set up loop variables
var angle = frame;
var angle2 = frame2;
var pos = position;

// update the html
for (var i=firstchar; i < numvisible; i++)
{
characters[i].style.left = pos;
characters[i].style.top = initialy + amplitude1 * Math.sin(angle) + amplitude2 * Math.sin(angle2);
angle += offset;
angle2 += offset2;
pos += charwidth;
}

for (var i=0; i < firstchar; i++)
{
characters[i].style.left = pos;
characters[i].style.top = initialy + amplitude1 * Math.sin(angle) + amplitude2 * Math.sin(angle2);
angle += offset;
angle2 += offset2;
pos += charwidth;
}
}

// start the animation
function start ()
{
if (!document.all)
return
// get all of the DIV tags into an array (IE only?)
characters = document.all.item('character');

// setup timeout to call this function again
interval = window.setInterval("step();", 20);
}

// stop the animation
function stop ()
{
if (!document.all)
return
if (interval)
clearInterval(interval);
}

window.onload=start
window.onunload=stop

// create the scroller
if (document.all)
sinescroll(20, 100, " Escrever seu texto que irá aparecer em curvas aqui... ",30);

</SCRIPT>

</BODY></HTML>

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

Você pode alterar o tamanho, o tipo e a cor da fonte, mudando os números que deixei em vermelho no código.

(Dica adaptada por Lilian Russo)


	.