tutoriais

Flash

FrontPage

Dreamweaver

Dhtml

Html

ASP

PHP

jogos

Galerias

fóruns

Flash

TUTORIAIS DE DHTML

Texto com o fundo das letras que desfila.

Um Soberbo efeito, que funciona nos 2 browsers.

Demo: a decorer

1. Inserir entre os tags <HEAD>...</HEAD>:

// URL du texto-imagem.
var textimage="../../../imagens/tutoriais/dhtml/ac_00026_01.gif"

// URL da imagem de fundo.
// Ela deve ter a mesma altura do que a texto-imagem.
var bgimage="../../../imagens/tutoriais/dhtml/ac_00026_02.jpg"

// A altura do texto-imagem (em pixeis).
var textimageheight=206

// A largura do texto-imagem.
var textimagewidth=359

// A largura da imagem de fundo.
// No mínimo a largura do texto-imagem. Quanto mais largo melhor.
var bgdivwidth=1200

// A distancia em relação a borda superior.
var textimagetop=10

// A distancia em relação a borda esquerda.
var textimageleft=10

// A velocidade da animação.
// Quanto mais pequeno será o valor, mais lente será o efeito.
var step=6

////////////////////////////////////////////////////////
var imgpreload=new Image()
imgpreload.src=textimage

var bgimgpreload=new Image()
bgimgpreload.src=bgimage

var bgdivtop=textimagetop
var bgdivleft=textimageleft
var bgdivheight=textimageheight
var cliptop=0
var clipright=textimagewidth
var clipbottom=bgdivheight
var clipleft=0
var clippoints
var contentbg=""
var pause=50
var timer

function init() {
	clipleft=0
	clipright=textimagewidth
	contentbg="<table cellpadding=0 cellspacing=0 border=0><tr>"
	contentbg+="<td><img src='"+bgimage+"' border='0' width='"+bgdivwidth+"' height='"+textimageheight+"'></td>"
	contentbg+="<td><img src='"+bgimage+"' border='0' width='"+bgdivwidth+"' height='"+textimageheight+"'></td>"
	contentbg+="<td><img src='"+bgimage+"' border='0' width='"+bgdivwidth+"' height='"+textimageheight+"'></td>"
	contentbg+="</tr></table>"
	
    if (document.all) {
	bgdiv.innerHTML=contentbg
	text.innerHTML="<img src='"+textimage+"' border='0' width='"+textimagewidth+"' height='"+textimageheight+"'>"
	document.all.text.style.posTop=textimagetop
        document.all.text.style.posLeft=textimageleft
        document.all.bgdiv.style.posTop=bgdivtop
        document.all.bgdiv.style.posLeft=bgdivleft
        movebackground()
    }
	
	if (document.layers) {
	document.bgdiv.document.write(contentbg) 
	document.bgdiv.document.close() 
	document.text.document.write("<img src='"+textimage+"' border='0' width='"+textimagewidth+"' height='"+textimageheight+"'>") 
	document.text.document.close() 
	document.text.top=textimagetop
        document.text.left=textimageleft
        document.bgdiv.top=bgdivtop
        document.bgdiv.left=bgdivleft 
        movebackground()
    }
}

function restart() {
	clipleft=0
	clipright=textimagewidth
        if (document.all) {
        document.all.bgdiv.style.posLeft=bgdivleft
        }	
	if (document.layers) {
        document.bgdiv.left=bgdivleft         
        }
	movebackground()
}

function movebackground() {
if (document.all) {
    if (document.all.bgdiv.style.posLeft >=(-bgdivwidth+textimagewidth+bgdivleft+step)) {   
        clipleft+=step
        clipright=clipleft+textimagewidth
        clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
	document.all.bgdiv.style.clip=clippoints
        document.all.bgdiv.style.posLeft-=step
        timer= setTimeout("movebackground()",pause)
    }
    else {
        clearTimeout(timer)
        text.innerHTML="<img src='"+textimage+"' border=0>"
        restart()
    }
}
if (document.layers) {
	if (document.bgdiv.left >=(-bgdivwidth+textimagewidth+bgdivleft+step-22)) {   
        clipleft+=step
        clipright=clipleft+textimagewidth
	document.bgdiv.clip.top=cliptop
	document.bgdiv.clip.left=clipleft
	document.bgdiv.clip.bottom=clipbottom
	document.bgdiv.clip.right=clipright
        document.bgdiv.left-=step
        timer= setTimeout("movebackground()",pause)
    }
    else {
        clearTimeout(timer)             
        document.text.document.write("<img src='"+textimage+"' border=0>") 
	document.text.document.close()  
        restart()
    }
}
}
// -->
</script>

Ter atenção aos seguintes parâmetros:

Temos 2 imagens: imagem de fundo e a texto-imagem.
Ambas devem ter a mesma altura.
A altura do texto-imagem (em pixeis).
var textimageheight=206
A largura do texto-imagem.
var textimagewidth=359
A largura da imagem de fundo.
No mínimo a largura do texto-imagem. Quanto mais largo melhor.
var bgdivwidth=1500
A distância em relação a borda superior.
var textimagetop=265
A distância em relação a borda esquerda.
var textimageleft=250
A velocidade da animação.
Quanto mais pequeno será o valor, mais lente será o efeito.
var step=6

2. Inserir dentro do tag <BODY>:

3. Inserir entre os tags <BODY>...</BODY>:

ANÚNCIOS