Effets d'Ecriture et de Texte

créer un texte qui zoom et dézoome

Cet article a été mis à jour, vous consultez ici une archive de cet article!

Nous avons vu le zoom il y a peu ...

Maintenant ce script gère le zoom et le dézoom !

Placez ce code entre <HEAD> et </HEAD> :

Code JAVASCRIPT :

<script language=javaScript>
<!--
// Vous 
 
pouvez modifier
var maxfontsize=40
var textcolor="AAAAAA"
var 
 
textfont="Arial"
var message="Votre texte"
// fin des 
 
modifications
var thissize=0
var step=1
 
function stretch() 
 
{
if (thissize<0) {step=1; thissize=0}
if (thissize < maxfontsize) 
 
{
if(document.all) {
zoomer.innerHTML="<span 
 
style='font-family:"+textfont+";font-size:"+thissize+"px;color:"+textcolor+
 
"'>"+message+"</span>"
}
 
if(document.layers) 
 
{
document.zoomer.document.write("<span 
 
style='font-family:"+textfont+";font-size:"+thissize+"px;color:"+textcolor+
 
"'>"+message+"</span>")
document.close()
}
step++
thissize=this
 
size+step
var timer=setTimeout("stretch()",50)
}
else 
 
{
clearTimeout(timer)
var 
 
intermezzo=setTimeout("shrink()",1000)
}
}
 
function shrink() 
 
{
if (thissize > -0) {
if(document.all) {
zoomer.innerHTML="<span 
 
style='font-family:"+textfont+";font-size:"+thissize+"px;color:"+textcolor+
 
"'>"+message+"</span>"
}
 
if(document.layers) 
 
{
document.zoomer.document.write("<span 
 
style='font-family:"+textfont+";font-size:"+thissize+"px;color:"+textcolor+
 
"'>"+message+"</span>")
document.close()
}
if (step >= 2) 
 
{step=step-1} else{step=1}
 
thissize=thissize-step
var 
 
timer=setTimeout("shrink()",50)
}
else {
clearTimeout(timer)
var 
 
intermezzo=setTimeout("stretch()",1000)
}
}
// 
 
-->
</script>

Vous pouvez modifier la taille maximale du texte, la couleur du texte et le contenu du texte.

Ajoutez dans la balise <BODY> :

Code HTML :

<Body onLoad="stretch()">

Puis placez après la balise <BODY> :

Code HTML :

<div id="zoomer" 
 
style="position:absolute;visibility:visible;top:10px; 
 
left:10px"></div>

Vous pouvez par ailleurs modifier l'endroit de l'apparition de votre animation en changeant les paramètres du top et du left.

Reste à voir le résultat en cliquant ICI

Ce script fonctionne sous Internet Explorer.