Inhalt

Einleitung Voraussetzungen Pop Up, Pop down Flatter, flatter Übersicht Start bei Null schreiben schreiben lassen bewegen wie? wo? wann? im Fluss Kosmetik Vorhang auf! Klappe zu!

---

Service

Kontakt & Feedback

CSS Anwendung

im Fluss

Eigentlich haben wir alles Wesentliche geschafft: der Schriftzug ist da, und er bewegt sich zusammen mit dem Cursor über den Schirm. Wir haben es also geschafft, Buchstaben gezielt zu positionieren, die Position des Mauszeigers abzuholen und divs zu bewegen.

In dieser Hinsicht kommt nichts Neues mehr auf uns zu, die fliessende Bewegung ist allein noch eine Sache der Kreativität und JavaScript-Programmlogik. Und die möchte ich hier kurz fassen.

Wir waren in unserer Lösung etwas zu effizient: Wir haben für jeden Buchstaben ausgerechnet, wo er hingehört, und ihn dann direkt dort hin gesetzt. Das geht zu schnell. Die fliessende Bewegung ergibt sich, wenn sich jeder Buchstabe an der Position seines linken Nachbars orientiert, und wenn man das nicht von links nach rechts sondern von rechts nach links macht.

Das bedeutet zwei Änderungen in unserern JavaScript-Abläufen:

1. Wir müssen uns die Positionen aller Buchstaben merken. Das tun wir mit folgenden Anpassungen:

   <script type="text/javascript">
   var text = "Homepapa for President!" ;
   var abstand = 20 ;
   var sx = 200 ;
   var sy = 200 ;
   var xpos = new Array() ;                   // eine Serie von Variablen für die X-Positionen
   var ypos = new Array() ;                   // eine Serie von Variablen für die Y-Positionen
   for(i=0 ; i<text.length ; i++) {
     xpos[i] = sx + i*abstand ;               // statt meinx und meiny verwenden wir nun diese
     ypos[i] = sy ;                           // neuen Variablen, die haben wir später noch.
     document.writeln('<div id="f_' + i + '"'
                    + ' class="flatter"'
                    + ' style="top: ' + ypos[i] + 'px ; left: ' + xpos[i] + 'px ">'
                    + text.substr(i,1) + '</div>') ;
   }

   meinx und meiny waren beides klassische Arbeits-Variablen - sie enthielten nacheinander die x- bzw y-Werte für alle 23 Buchstaben. Jetzt haben wir stattdessen für jeden Buchstaben eine eigene x- und eine eigene y-Variable, so dass wir auch später noch auf diese Werte zurückgreifen können.
2. Die Funktion bewegen() läuft nun etwas anders ab: erstens wie gesagt von rechts nach links, und zweitens indem sich jeder Buchstabe auf der selben Höhe rechts von seinem Nachbarn einreiht:

   function bewegen(neux,neuy) {
     for (i=text.length-1; i>0; i--) {       // jetzt geht's von rechts nach links
       j = i-1                               // das zeigt auf den linken Nachbarn
       xpos[i] = xpos[j] + abstand ;         // rechts von ihm einreihen
       ypos[i] = ypos[j] ;                   // und auf der selben Höhe
       meini = "f_" + i ;
       document.getElementById(meini).style.left = xpos[i] + "px" ;
       document.getElementById(meini).style.top  = ypos[i] + "px" ;
     }
     xpos[0] = neux + abstand ;              // Sonderbehandlung für den ersten Buchstaben,
     ypos[0] = neuy ;                        // weil der ja keinen linken Nachbarn hat.
     document.getElementById("f_0").style.left = xpos[0] + "px" ;
     document.getElementById("f_0").style.top  = ypos[0] + "px" ;
     window.setTimeout("bewegen(sx,sy)",20) ;
   }

Das war alles - das Resultat siehst du hier.