CSS Anwendung
Übersicht
Beim Versuch, unsere Aufgabe zu strukturieren, stellen wir fest,
- dass in diesem frei schwebenden Schriftzug jeder Buchstabe individuell positioniert wird.
Wir haben es offenbar mit Positionierungen zu tun, und das können wir bekanntlich mit CSS machen.
Machen wir uns also schon mal darauf gefasst, ganz viele
<div>-Elemente mit
absoluter Positionierung verwalten zu müssen.
- dass hier ein hoher Grad von Interaktivität besteht: Die Anzeige reagiert auf jede Cursor-Bewegung.
Ein klarer Fall für den Einsatz von JavaScript.
Der JavaScript-Teil wird übrigens gar nicht mal so umfangreich ausfallen, aber ein paar inhaltlich anspruchsvolle
Zeilen enthalten. Je nun, die werden wir dann erklären, wenn's so weit ist.
Unser weiteres Vorgehen hab ich mir folgendermassen vorgestellt:
- Zuerst positionieren wir mal einen kurzen Text in einzelnen Buchstaben auf dem Schirm.
Damit repetieren wir die nötigen CSS-Kenntnisse und sehen ein paar Regelmässigkeiten,
die wir uns im Folgenden zu Nutze machen können.
- Als nächstes lassen wir genau diese Arbeit von einem JavaScript machen.
- Danach lösen wir das Problem, den Schriftzug an einen andern Ort zu bewegen.
- Und schliesslich verbinden wir das noch mit der Cursorbewegung.