:: Tutorial de E-mails ::

Curso de Formatação Avançado- Lição 5

Texto em curvas no corpo do e-mail

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, logo depois de <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 e os demais itens responsáveis pela amplitude das curvas, mudando os números que deixei em vermelho no código.

Tarefa:

Crie um e-mail usando um texto em curvas. O texto, a velocidade, as cores, enfim os atributos todos ficam a seu critério. Use um papel de carta, moldura na mensagem, barra de rolagem colorida, música e uma mensagem de rodapé.

Escreva algumas palavras e envie para o grupo.

Importante: Insira seu cartão de visitas!

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


	.