TE02 Efeito Magneto - formatação adian

    
TE02 Efeito Magneto

Esse tutorial oferece o script de efeitos sobre frase. As frase são montadas como se fossem atraídas por um imã.

Materiais
1 background colorido
texto
1 música
1 imagem ( opcional)

Vamos usar o processo de substituição de código e depois complementá-lo.

1 - Abra uma nova mensagem.
2 - Clique na abinha "Origem"
3 - Delete todo o código existente e cole em seu lugar o código abaixo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>TextMagnet</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META
content="DHTML, text, scroller, marquee, ticker, JavaScript, Dynamic HTML, download, free, samples, applet, animation, news"
name=keywords>
<META
content="Great text effect for your good and bad news! TextMagnet script reassembles your messages from small portions of text that are randomly spread out all over the screen. The script draws the text-chunks together like a strong magnet! Made for IE5 and higher."
name=description>
<STYLE>.spanstyle {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 28px; LEFT: -5000px; PADDING-BOTTOM: 5px; WIDTH: 280px; COLOR: #080000; BORDER-TOP-STYLE: solid; PADDING-TOP: 5px; FONT-STYLE: italic; FONT-FAMILY: Arial Black; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; POSITION: absolute; HEIGHT: 90px; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center; BORDER-BOTTOM-STYLE: solid
}
</STYLE>

<SCRIPT>
<!-- Beginning of JavaScript -

// CREDITS:
// TextMagnet by Urs Dudli and Peter Gehrig
// Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.ch.
// info@24fun.ch
// 2/24/2000

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a link to http://www.24fun.ch on the webpage
// where this script will be running.

// CONFIGURATION:
// 1. Copy and paste the two script-blocks into your HTML-file:
// Put the first script-block inside the head-section of your HTML-file.
// Put the second script-block right at the end of the
// body-section of your HTML-file.
// 2. Copy and paste the style-sheet into head-section of your HTML-file.
// Configure font, font-size, font-color, background-color etc.
// 3. Insert 'onLoad="changetext()"' into the body tag.
// 4. Configure the variables below:

// The width of your textbox (pixels).
var textwidth=300

// The height of your textbox (pixels).
var textheight=300

// Your messages. You may add as many messages as you like.
var message=new Array()
message[0]=" ESCREVA AQUI - FRASE 1"
message[1]=" ESCREVA AQUI - FRASE 2 "
message[2]=" ESCREVA AQUI - FRASE 3"
message[3]=" ESCREVA AQUI - FRASE 4 "
message[4]=" ESCREVA AQUI - FRASE 5"
message[5]=" ESCREVA AQUI - FRASE 6"
message[6]=" ESCREVA AQUI - FRASE 7"
message[7]=" ESCREVA AQUI - FRASE 8"
message[8]=" ESCREVA AQUI - FRASE 9"
message[9]=" ESCREVA AQUI - FRASE 10"
message[10]=" ESCREVA AQUI - FRASE 11"
message[11]=" ESCREVA AQUI - FRASE 12"

// Final horizontal position of the image: distance to the left margin of the window
// If you set this to '-1' the textbox will centered in the middle of the browser-window
var x_finalpos=-1

// Final vertical position of the image: distance to the top margin of the window
// If you set this to '-1' the textbox will centered in the middle of the browser-window
var y_finalpos=50

// Number of sliced cells (the higher this value the slower the script)
var x_slices=24

// Number of sliced rows (the higher this value the slower the script)
var y_slices=1

// Speed of the reassembling effect. More means slower.
var pause=15

// The width and heigth of the zone where the debris of the message are spread (pixels)
var screenwidth=900
var screenheight=600

// Do not change the variables below
var x_step=new Array()
var y_step=new Array()
var x_randompos=0
var y_randompos=0
var i_loop=0
var max_loop=30
var i_text=0
var width_slice=Math.floor(textwidth/x_slices)
var height_slice=Math.floor(textheight/y_slices)
var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=width_slice
var spancounter=0

function initiate() {
if (x_finalpos==-1) {
x_finalpos=Math.floor(document.body.clientWidth/2)-Math.floor(textwidth/2)
}
if (y_finalpos==-1) {
y_finalpos=Math.floor(document.body.clientHeight/2)-Math.floor(textheight/2)
}
cliptop=0
clipbottom=height_slice
clipleft=0
clipright=width_slice
i_loop=0
spancounter=0
if (document.all) {
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisspan=eval("document.all.span"+spancounter+".style")
x_randompos=Math.ceil(screenwidth*Math.random())
y_randompos=Math.ceil(screenheight*Math.random())
thisspan.posLeft=x_randompos
thisspan.posTop=y_randompos
thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
clipleft+=width_slice
clipright+=width_slice
spancounter++
}
clipleft=0
clipright=width_slice
cliptop+=height_slice
clipbottom+=height_slice
}
}
explode_IE()
}

function changetext() {
spancounter=0
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisspan=eval("document.all.span"+spancounter+".style")
thisspan.posLeft=-5000
spancounter++
}
}
spancounter=0
if (i_text>message.length-1) {i_text=0}
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisinnerspan=eval("span"+spancounter)
thisinnerspan.innerHTML=message[i_text]
spancounter++
}
}
i_text++
initiate()
}


function explode_IE() {
spancounter=0
if (i_loop<=max_loop-1) {
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisspan=eval("document.all.span"+spancounter+".style")
x_step[spancounter]=(x_finalpos-thisspan.posLeft)/(max_loop-i_loop)
y_step[spancounter]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop)
thisspan.posLeft+=x_step[spancounter]
thisspan.posTop+=y_step[spancounter]
spancounter++
}
}
i_loop++
var timer=setTimeout("explode_IE()",pause)
}
else {
spancounter=0
clearTimeout(timer)
var timer=setTimeout("changetext()",2000)
}
}
// - End of JavaScript - -->
</SCRIPT>

<BODY style="COLOR: #ffffff; FONT-FAMILY: " text=#ffffff bgColor=#ffffff onload=changetext()>
<DIV>&nbsp;</DIV>
<DIV><SCRIPT>
<!-- Beginning of JavaScript -
if (document.all) {
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
document.write("<span id='span"+spancounter+"' class='spanstyle'></span>")
spancounter++
}

}
spancounter=0
}
// - End of JavaScript - -->
</SCRIPT>
</BODY></HTML>

A parte do código que está destacada em vermelho, é a parte responsável pela escrita. Escreva frase a frase , não esquecendo que deverá estar entre aspas.

Insira o Background através de :Formatar/Plano de fundo/Imagem ou a cor ( formatar/Plano de fundo/Cor)

Em azul  esta destacada a parte do código responsável pela cor da fonte . Para alterar a cor da fonte, basta alterar o código da cor.

 Em rosa está destacada o nome da fonte. Para trocar a fonte basta alterar o nome dela. Lembrando que sempre é necessário usar as fontes originais do Windows

Destacado em verde limão o background onde está as frases escritas vc pode alterar a cor dessa caixinha:

                                                   Cor do script original Cor alterada

   

Pode -se também  alterar o estilo da borda está destacado em laranja.  O estilo está como solid, para alterar basta trocar no  nome do estilo.
Para colocar fundo na mensagem usa-se o caminho: Formatar/ Plano de Fundo/Cor:

4 - Colado o script, complementado e feita as alterações necessárias cheque o efeito na abinha "Visualizar":
5 - Checado e tudo certinho ,Volte a abinha "Editar" e complete a formatação   com:
Uma  música
Uma imagem
Com uma borda e uma barra colorida

Borda e barra de rolagem colorida

<STYLE>BODY {
BORDER-RIGHT: #e5c5b8 20px dashed; BORDER-TOP: #e5c5b8 20px dashed; SCROLLBAR-HIGHLIGHT-COLOR: #606c62; BORDER-LEFT: #e5c5b8 20px dashed; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #e5c5b8 20px dashed; SCROLLBAR-BASE-COLOR: #e5c5b8
}
</STYLE>

 TE02 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.




Não esqueça, por favor:
colocar no assunto: seu nome ou nick - TE02 - Texto: Efeito na Escrita  - Efeito Magneto.
Crie seu próprio material para a formatar a aula
No corpo do e-mail coloque o link correspondente a esse tutorial.
Não esqueça do anti-banner
Verifique o Peso antes de enviar a Mensagem

Copyright© 2002/2004 Dama Da Noite * Todos os direitos reservados*

Esse  tutorial foi criado por brisa®  em janeiro 2007  especialmente para o Grupo PSP Brasil.

É expressamente proibida, por lei, a divulgação desta página em outro site ou qualquer outro modo de veiculação sem a autorização expressa da autora ou dos detentores de copyright do texto, da formatação e dos demais elementos que compõem a página. 

Direitos Autorais protegidos pela Lei 9.610 de 19/02/1998.