Efeitos da Barra de Rolagem

Hoje vamos aprender afeitos da Barra de rolagem; ela ficará piscando. Pra isso vamos precisar:

&- Uma pattern ou tile
&- Tabela
&- imagem
&- Gifs
&-Texto
&- Música

1 - Barra de Rolagem - Efeito Piscando (aqui)

Script:

<SCRIPT language=JavaScript1.2>
var linkexchangefreq=Math.floor(Math.random()*11)
if (linkexchangefreq>5)
document.write('<style>.linkexchange{display:none}</style>')
</SCRIPT>

<SCRIPT language=javascript>
<!--
var begcolor='#000080';
var endcolor='#c0c0ff';
var steps=2;
var delay=200;

if(document.all && document.getElementById){

document.body.style.scrollbarBaseColor=begcolor;

function colorset(num){
this.beg=parseInt('0x'+begcolor.substring(num,num+2));
this.end=parseInt('0x'+endcolor.substring(num,num+2));
this.up=this.startup=(this.end>=this.beg)? true : false;
this.incr=Math.abs(this.end-this.beg)/steps;
this.current=this.beg;
}
function changecolors(){
var color=new Array();
for(i=1;i<=3; i++){
(data[i].up)? data[i].current+=data[i].incr : data[i].current-=data[i].incr;
if(data[i].startup){
if(data[i].current>=data[i].end){ data[i].up=false; data[i].current=data[i].end}
if(data[i].current<=data[i].beg){ data[i].up=true; data[i].current=data[i].beg }
}
if(!data[i].startup){
if(data[i].current<=data[i].end){ data[i].up=true; data[i].current=data[i].end}
if(data[i].current>=data[i].beg){ data[i].up=false; data[i].current=data[i].beg}
}
color[i]=data[i].current;
}
color[4]=Math.floor(color[1]).toString(16); if(color[4].length==1)color[4]='0'+color[4];
color[5]=Math.floor(color[2]).toString(16); if(color[5].length==1)color[5]='0'+color[5];
color[6]=Math.floor(color[3]).toString(16); if(color[6].length==1)color[6]='0'+color[6];
document.body.style.scrollbarBaseColor='#'+color[4]+color[5]+color[6];
//document.bgColor='#'+color[4]+color[5]+color[6];
}
var data=new Array();
for(i=1, j=1;i<=3; i++, j+=2)data[i]=new colorset(j);
window.onload=function(){ setInterval('changecolors()',delay) }
}

//-->
</SCRIPT>

Você deve colocar as cores que combina com seu trabalho, aqui:

var begcolor='#000080';
var endcolor='#c0c0ff';

Veja no print:

Deixei em destaque em vermelho onde está o código das cores assim fica mais fácil pra você localizar.

Você pode alterar essas cores, colocando cores que combinem com a mensagem que está formatando.

Dica: Coloquei em anexo um programinha fácil de pegar cores (aqui) e também abaixo segue o link da
tabela de cores:

http://ilove.terra.com.br/lili/tabela_de_cores1.asp

Mas também posso alterar para duas cores distintas. Como por exemplo: vermelho e azul.
vamos ter já um efeito diferente.

2 - Outlook Express

2.1 - Abra o Outlook Express

2.2 - Abra uma página em branco.

3 - Aplicando a Barra de Rolagem

3.1 - Onde aplicamos o código da barra de rolagem no Outlook Express?

3.2 Na nova mensagem que abrimos, clicamos na abinha "Origem"

3.3 - No final do código você vai achar:

</body> </html>

Coloque o código entre os dois, assim:

</body>aqui </html>

 

3.4 - Coloque o código da barra de rolagem piscante no lugar desse.

Obs.: quando você usar esse código, não use o script da barra de rolagem. (scrollbar)

Pode usar as barrinhas coloridas, sim.

4 - Coloque na abinha "Visualizar" e veja o resultado.

5 - Coloque na abinha Editar.

6 - Complemente com uma tabela, mensagem, algumas gifs, assinatura.

7 - Coloque também um Script para mensagem do rodapé.

Script: (aqui)

<SCRIPT language=JavaScript>

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var osd = "*** Escreva aqui *** "
osd +=" ";
var timer;
var msg = "";
function scrollMaster () {
msg = customDateSpring(new Date())
clearTimeout(timer)
msg += " " + showtime() + " " + osd
for (var i= 0; i < 100; i++){
msg = " " + msg;
}
scrollMe()
}
function scrollMe(){
window.status = msg;
msg = msg.substring(1, msg.length) + msg.substring(0,1);
timer = setTimeout("scrollMe()", 200);
}
function showtime (){
var now = new Date();
var hours= now.getHours();
var minutes= now.getMinutes();
var seconds= now.getSeconds();
var months= now.getMonth();
var dates= now.getDate();
var years= now.getYear();
var timeValue = ""
timeValue += ((months >9) ? "" : " ")

timeValue += ((dates >9) ? "" : " ")
timeValue = ( months +1)
timeValue +="/"+ dates
timeValue +="/"+ years
var ap="A.M."
if (hours == 12) {
ap = "P.M."
}
if (hours == 0) {
hours = 12
}
if(hours >= 13){
hours -= 12;
ap="P.M."
}
var timeValue2 = " " + hours
timeValue2 += ((minutes < 10) ? ":0":":") + minutes + " " + ap
return timeValue2;
}
function MakeArray(n) {
this.length = n
return this
}
monthNames = new MakeArray(12)
monthNames[1] = "Janeiro"
monthNames[2] = "Fevereiro"
monthNames[3] = "Março"
monthNames[4] = "Abril"
monthNames[5] = "Maio"
monthNames[6] = "Junho"
monthNames[7] = "Julho"
monthNames[8] = "Agosto"
monthNames[9] = "Setembro"
monthNames[10] = "Outubro"
monthNames[11] = "Novembro"
monthNames[12] = "Dezembro"
daysNames = new MakeArray(7)
daysNames[1] = "Domingo"
daysNames[2] = "Segunda"
daysNames[3] = "Terça"
daysNames[4] = "Quarta"
daysNames[5] = "Quinta"
daysNames[6] = "Sexta"
daysNames[7] = "Sábado"
function customDateSpring(oneDate) {
var theDay = daysNames[oneDate.getDay() +1]
var theDate =oneDate.getDate()
var theMonth = monthNames[oneDate.getMonth() +1]
var dayth=""
if ((theDate == 1) || (theDate == 21) || (theDate == 31)) {
dayth="";
}
if ((theDate == 2) || (theDate ==22)) {
dayth="";
}
if ((theDate== 3) || (theDate == 23)) {
dayth="";
}
return theDay + ", " + theMonth + " " + theDate + dayth + ","
}
scrollMaster();
// End -->
</SCRIPT>

Exemplo da aula

Exercício

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

Ele deverá conter:

Mensagem

Música

Uma imagem, ou gifs.

Assinatura

Borda Colorida

Barra de Rolagem com efeito piscando em dois tons de vermelho (um tom escuro e outro clarinho)

Script para mensagem no rodapé

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

Ele deverá conter:

Mensagem

Música

Uma imagem, ou gifs.

Assinatura

Borda Colorida

Barra de Rolagem com efeito Piscando em duas cores distintas

Script para mensagem no rodapé

Tenha um ótimo trabalho!!!!

Peketita's Designer