Drehender Kreis 1

So funktioniert das Script

Das Script besteht aus zwei Abschnitten: Zuerst werden die Punkte erzeugt und in die Bühne gehängt, danach läuft eine Endlosschleife, die sie alle 50 Millisekunden neu positioniert. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablennamen nicht mit anderen Scripts kollidieren.

#dk-buehne { position: relative; overflow: hidden; height: 260px; }
#dk-buehne .dk-punkt { position: absolute; left: -300px; top: -300px; }

Zwei CSS-Regeln machen die Animation überhaupt möglich. position: absolute löst die Punkte aus dem normalen Textfluss, sodass sie sich per left und top frei platzieren lassen. Das position: relative der Bühne bestimmt, worauf sich diese Angaben beziehen — ohne diese Zeile wären es die Koordinaten der ganzen Seite. Die Startposition bei −300 Pixeln parkt die Punkte außerhalb des sichtbaren Bereichs, bis sie das Script erstmals einsortiert.

for (let i = 0; i < 101; i++) {
  const punkt = document.createElement("div");
  punkt.className = "dk-punkt";
  punkt.textContent = ".";
  buehne.appendChild(punkt);
  laySyntax[i] = punkt.style;
}

Hier entstehen die Punkte: createElement("div") baut ein neues Element, textContent füllt es mit einem Punkt, appendChild() hängt es in die Bühne. Das Original schrieb diese 101 Elemente noch mit document.write() in die Seite — eine Technik, die heute als überholt gilt, weil sie eine bereits fertig geladene Seite überschreiben kann. Die letzte Zeile ist ein Tempotrick: Statt später jedes Mal das Element neu zu suchen, wird gleich dessen style-Objekt in der Liste laySyntax abgelegt.

laySyntax[p].left = mitteX + radius * Math.cos(alpha + 0.0628 * p) + "px";
laySyntax[p].top = mitteY + radius * Math.sin(alpha + 0.0628 * p) + "px";

Das ist die eigentliche Kreisformel. Math.cos() liefert die waagerechte, Math.sin() die senkrechte Auslenkung — beide ergeben Werte zwischen −1 und 1, mit dem Radius multipliziert also Abstände zwischen −100 und 100 Pixeln von der Mitte. Der Term 0.0628 * p versetzt jeden Punkt um ein Hundertstel des Vollkreises gegenüber seinem Vorgänger, sodass sie sich gleichmäßig auf dem Kreis verteilen. Das angehängte "px" ist Pflicht, denn CSS erwartet eine Einheit.

alpha = alpha - 0.01;
setTimeout(move, 50);

alpha ist der gemeinsame Startwinkel aller Punkte. Wird er bei jedem Durchgang ein wenig verkleinert, wandert der ganze Kreis weiter — das ist die Drehung. setTimeout(move, 50) ruft die Funktion nach 50 Millisekunden erneut auf, also etwa zwanzigmal pro Sekunde. Im Original stand hier setTimeout("move()", 50) mit der Funktion als Zeichenkette; das ist langsam und unsicher, weil der Browser den Text erst als Code auswerten muss. Moderner übergibt man die Funktion direkt, ohne Anführungszeichen und ohne Klammern.

const mitteX = buehne.clientWidth / 2;
const mitteY = buehne.clientHeight / 2;

Die Mitte wird bei jedem Durchgang neu bestimmt, damit der Kreis auch dann zentriert bleibt, wenn das Fenster verkleinert wird. clientWidth und clientHeight sind die Innenmaße der Bühne. Das Original benutzte hier window.innerWidth und window.innerHeight, also die Maße des Browserfensters — daher der bildschirmfüllende Kreis.

Zum Anpassen: Die 100 in const radius ändert die Größe des Kreises, die 50 in setTimeout das Tempo (kleinere Zahl = flüssiger und schneller), und aus alpha - 0.01 wird mit alpha + 0.01 eine Drehung im Uhrzeigersinn. Statt des Punktes in textContent könnt ihr jedes beliebige Zeichen einsetzen — ein *, ein o oder ein Sternchen-Symbol. Und wer den Kreis wie im Original über den ganzen Bildschirm legen will, gibt der Bühne position: fixed; inset: 0; height: 100vh; pointer-events: none; und ersetzt clientWidth/clientHeight durch window.innerWidth/window.innerHeight.