Fliegende Buchstaben

Fliegende Buchstaben - Animation per JavaScript

Bewegen Sie die Maus (funktioniert nur bei älterem Internet Explorer)

Sourcecode:

<style>
 .spanstyle {position:absolute;visibility:visible;top:-30px;
    font-size:11pt;font-family:Arial;font-weight:bold;color:#000000;}
</style>

<script language="JavaScript">
var x,y
var step=10
var flag=5

var message="T h i s   i s   a   f l y i n g   e x a m p l e . . . "
message=message.split("")

var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
   xpos[i]=-50
}

var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
  ypos[i]=-50
}

function handlerMM(e){
   x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
   y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
   flag=1
}

function trace() {
 if (flag==1 && document.all) {
  for (i=message.length-1; i>=1; i--) {
    xpos[i]=xpos[i-1]+step
    ypos[i]=ypos[i-1]
   }
    xpos[0]=x+step
    ypos[0]=y

     for (i=0; i<message.length-1; i++) {
       var thisspan = eval("span"+(i)+".style")
       thisspan.posLeft=xpos[i]
       thisspan.posTop=ypos[i]
   }
 }
 else if (flag==1 && document.layers) {
   for (i=message.length-1; i>=1; i--) {
     xpos[i]=xpos[i-1]+step
     ypos[i]=ypos[i-1]
   }
  xpos[0]=x+step
  ypos[0]=y

   for (i=0; i<message.length-1; i++) {
     var thisspan = eval("document.span"+i)
     thisspan.left=xpos[i]
     thisspan.top=ypos[i]
   }
 }
 var timer=setTimeout("trace()",30)
}
</script>

</head>

<body onload="trace()">

<script language="JavaScript">
for (i=0;i<=message.length-1;i++) {
 document.write("<span id='span"+i+"' class='spanstyle'>")
 document.write(message[i])
 document.write("</span>")
}

if (document.layers){
  document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
</script>

Sponsoren und Investoren

Sponsoren und Investoren sind jederzeit herzlich willkommen!
Wenn Sie die Information(en) auf dieser Seite interessant fanden, freuen wir uns über eine kleine Spende. Empfehlen Sie uns bitte auch in Ihren Netzwerken (z. B. Twitter, Facebook oder Google+). Herzlichen Dank!

Nutzen Sie unsere Suchfunktion:

Nach oben Sitemap
Impressum Datenschutz

Hinweis: Diese Webseite kann Werbeanzeigen und Werbeeinblendungen oder eingebundene Links von Diensten und Inhalten Dritter enthalten. Beachten Sie dazu unsere Datenschutzerklärung.