TEXTE FLOU
Etape 1 :Ajouter entre les balises <HEAD>...</HEAD> :
<style type="text/css"> .textstyle { position:absolute; left:-2000px; width:110px; height:auto; font-family:Arial; font-size:9pt; text-align:center; color:FFFFFF; } .coverstyle { position:absolute; left:-2000px; width:140px; height:180px; background-color:navy; filter:alpha(opacity=0,finishopacity=60,style=2,startX=0px,startY=0px,finishX=120px,finishY=160px); } </STYLE> <SCRIPT> <!-- //SmoothScroller by Peter Gehrig http://www.24fun.ch var covertop=10 var coverleft=10 var coverwidth=140 var coverheight=180 var texttop=covertop var textleft=coverleft+15 var textwidth=coverwidth-20 var textheight=500 var cliptop=texttop var clipright=textwidth var clipbottom=coverheight var clipleft=0 var clippoints var step=2 var pause=50 var timer function init() { if (document.all) { document.all.text.style.posTop=texttop document.all.text.style.posLeft=textleft document.all.cover.style.posTop=covertop document.all.cover.style.posLeft=coverleft scrolltext() } } function scrolltext() { if (document.all.text.style.posTop > (covertop-textheight)) { cliptop+=step clipbottom+=step clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.all.text.style.clip=clippoints document.all.text.style.posTop-=step } else { document.all.text.style.posTop=texttop cliptop=covertop clipbottom=coverheight } timer= setTimeout("scrolltext()",pause) } // --> </SCRIPT>
On peut configurer le format du texte et de la zone de flou dans la partie <STYLE>. Utilisateurs avertis uniquement !
Etape 2 :Ajouter juste après le body :
<DIV ID="text" class="textstyle"> Le texte du scroller vient ici !</DIV> <DIV ID="cover" class="coverstyle"></DIV>
Le texte défilant se met ici.
Etape 3 :Ajouter dans la balise body :
<BODY onLoad="init()">