Texte et image avec la souris

DEMONSTRATION

Du texte se déplace comme un fil sous l'effet du vent à coté de la souris.. Un effet surprenant !

Code source entre <BODY> et </BODY>
top


<SCRIPT LANGUAGE="JavaScript">
<!--
//Interdiction d'effacer ces lignes
//D'autres script,applet,images sur webgraf.com 
//Auteur: Mathieu Gros, webmaster@webgraf.com

var texte='Bienvenue !' // Le texte de l'animation ( pas de code HTML !! )
var esp=15 // L'espace ne pixel entre chaque caractères
var speed=5 // La vitesse de déplacement
var DeltaX=10 // L'espace horizontal en pixel séparant l'animation de la souris
var DeltaY=-20 // L'espace vertical en pixel séparant l'animation de la souris
var Avant='<Font face=Arial size=3 color="#FFFFFF"><B>' //Le code Html avec le texte
var Apres='</B></FONT>' //Le code Html après le texte

//Pas touche à la suite
var ok=0;var x,y;txt=texte.split("")
var str=texte.length-1;var t=0;
xp= new Array();yp= new Array()
for (i=0;i<str;i++){xp[i]=-50;yp[i]=-50;
if (navigator.appName == "Netscape") { 
document.write('<LAYER NAME="ly'+i+'" top=-50>'+Avant+txt[i]
+Apres+'</font></LAYER>');t=1;}else{
document.write('<span ID="ly'+i+'" STYLE="Position:relative; top:-50;">'
+Avant+txt[i]+Apres+'</font></span>');t=0};}
function record(ev){ok=1
if (t){x=ev.pageX+DeltaX; y=ev.pageY+DeltaY}
else {x=event.clientX+DeltaX; y=event.clientY+DeltaY+document.body.scrollTop};}
function anim(){if (ok){
for (a=str;a>0;a--){
xp[a]=xp[a-1]+esp
yp[a]=yp[a-1];}
xp[0]=x+esp;yp[0]=y
if (t){for (a=0;a<str;a++){
with(eval("document.ly"+a)){
left=xp[a];top=yp[a];};};}else{
for (a=0;a<str;a++){
with(eval("document.all.ly"+a+".style")){
posLeft=xp[a];posTop=yp[a];};};};}
setTimeout("anim()",speed);}
if(t) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = record;
anim()
//-->
</script>
 
INFORMATIONS COMPLEMENTAIRES
top

Comment intégrer ce script dans votre page: Vous pouvez télécharger cette page au format zip :télécharger.








Un problème ou une critique : e-mail
Des ressources utiles et gratuites pour vos pages Web :
webgraf.com