Un texte avec un arriere plan defilant !

Télécharger le projet
Commenter

Description

Comme le titre le dit, c'est un texte avec un arrière plan défilant, je m'explique, nous avons deux images qui se superposent, l'image du dessus est votre texte et l'image du dessous et votre fond qui défile de droite à gauche. (j'ai mis un exemple dans le zip).
Le script est très simple à comprendre et ô désespoir, ne marche pas sous mozilla (si quelqu'un peut m'aider pour ce faire, dites-le moi dans les commentaires).

Source / Exemple : 


<html>
<head>
<STYLE>
<!--Style css qui fait que les images se chevauchent -->
.textstyle	{
	position:absolute;
	left:-2000px;
}
.bgdivstyle	{
	position:absolute;
	left:-2000px;
}
</STYLE>
<SCRIPT>
<!-- 

// Url de votre image texte
var textimage="imagetexte.gif"

// Url de l'image d'arriere plan
// /!\ Elle doit avoir la même hauteur que le texte-image. /!\
var bgimage="imagefond.jpg"

// La hauteur du texte image (en pixels).
var textimageheight=206

// La largeur de l'image texte
var textimagewidth=359

// La largeur de l'image d'arrière-plan.
// Au minimum la largeur du texte-image. Plus large est souhaitable.
var bgdivwidth=1200

// Distance entre votre image et le bord supérieur de la page
var textimagetop=10

// Distance entre votre image et le bord droit de la page.
var textimageleft=10

// La vitesse de l'animation.
// Plus la valeur est petite, plus l'animation sera lente
var step=5

/////////////////////////////////////////////////////////
///////////// A partir de la pas toucher ! //////////////
/////////////////////////////////////////////////////////
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>
<title>Un texte avec un arrière plan défilant !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000" onLoad="init()">
<DIV ID="bgdiv" class="bgdivstyle"></DIV>
<DIV ID="text" class="textstyle"></DIV>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Pour pour faire 
  l'image du dessus (l'image du texte) il vous suffit avec nimporte quel logiciel 
  de retouche de photos de prendre une image vierge blanche et d'inscrire votre 
  texte à la gomme dessus.</font></p>

</body>
</html>

Conclusion :


Pour pour faire l'image du dessus (l'image du texte) il vous suffit avec nimporte quel logiciel de retouche de photos de prendre une image vierge blanche et d'inscrire votre texte à la gomme dessus.

Tous est dans le zip avec un exemple.
Voir l'exemple : http://sectioneurope.free.fr/javascriptfr/test.htm
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (la_pin)