JavaScripts › Verschiedenes

Erdbeben

Lässt die Seite auf Knopfdruck wackeln — die Stärke des Bebens bestimmt ihr selbst.

Ein Klick auf „Bebe!“ und alles wackelt: Dieses Script ruckelt den Inhalt für einen knappen Moment kreuz und quer und lässt das Zittern dann langsam ausklingen — wie ein kleines Erdbeben. Je höher die Zahl im Eingabefeld, desto heftiger fällt es aus. Probiert erst die voreingestellte 3 und danach ruhig einmal die 15.

Ein Hinweis zur Geschichte des Scripts: In der Fassung von 2004 verschob es mit window.moveBy() das gesamte Browserfenster auf dem Bildschirm — deshalb stand damals auch dabei, dass es nur im Internet Explorer und nur außerhalb des Vollbildmodus funktioniert. Genau das erlauben Browser heute aus gutem Grund nicht mehr: Eine beliebige Webseite darf euer Fenster nicht mehr durch die Gegend schieben. Die modernisierte Fassung erzeugt denselben Eindruck auf dem erlaubten Weg — sie verschiebt nicht das Fenster, sondern den Inhalt darin. Dafür läuft sie in jedem Browser.

Technisch steckt dahinter kein Bild und keine Animationsdatei, sondern eine kurze Rechnung, die 60-mal pro Sekunde eine neue, zufällige Verschiebung ausrechnet. Das Zufällige ist dabei entscheidend: Ein regelmäßiges Hin und Her sähe aus wie ein Metronom, erst die unvorhersehbaren kleinen Sprünge wirken wie ein echtes Beben. Und weil der Ausschlag im Verlauf immer kleiner wird, klingt es aus, statt einfach abzubrechen.

Solche Effekte lassen sich gut dosieren — als kurzer Gag auf einer Spaßseite oder als Reaktion auf eine falsche Antwort in einem Quiz. Wer noch mehr Bewegtes sucht, findet im Fach Fun den Matrix-Zeichenregen; wer lieber selbst etwas anstellt, probiert die Mauskoordinaten.

Verschiedenes Baujahr 2004 läuft in deinem Browser
Hier wackelt es.
Tragt eine Stärke ein und drückt auf „Bebe!“.

Das Beben dauert etwa eine Dreiviertelsekunde und wird dabei immer schwächer.

So funktioniert das Script

Das Script besteht aus drei Teilen: Es liest die gewünschte Stärke aus dem Eingabefeld, verschiebt dann in schneller Folge den Inhalt um zufällige kleine Beträge und hört nach einer festgelegten Zeit wieder auf. Alles steckt in einer sofort ausgeführten Funktion, damit die Namen nicht mit anderen Scripts der Seite kollidieren.

let wert = Number(feld.value.replace(",", "."));
if (!isFinite(wert) || wert <= 0) { wert = 3; }
if (wert > 20) { wert = 20; }

Zuerst wird die Eingabe geprüft. Number() macht aus dem eingetippten Text eine Zahl, isFinite() erkennt Unsinn wie Buchstaben oder ein leeres Feld — in dem Fall gilt einfach wieder die 3. Die Obergrenze 20 ist kein Rechenzwang, sondern Rücksicht: Bei sehr großen Werten würde die Fläche so weit springen, dass vom Effekt nur noch Flackern übrig bleibt.

const start = performance.now();

performance.now() liefert die aktuelle Zeit in Millisekunden. Sie wird beim Start gemerkt, damit das Script später jederzeit ausrechnen kann, wie lange das Beben schon läuft — daraus ergibt sich, wie stark es gerade noch ausschlagen darf.

const anteil = (jetzt - start) / DAUER;
if (anteil >= 1) {
  flaeche.style.transform = "";
  laeuft = false;
  return;
}

anteil ist der Fortschritt des Bebens: 0 am Anfang, 0,5 in der Mitte, 1 am Ende. Ist die Dauer erreicht, wird die Verschiebung mit transform = "" zurückgenommen — die Fläche sitzt dann wieder exakt an ihrem Platz — und die Funktion beendet sich. Die Variable laeuft verhindert derweil, dass ein zweiter Klick ein zweites Beben startet, das mit dem ersten um dieselbe Fläche streiten würde.

const weite = staerke * AUSSCHLAG * (1 - anteil);
const x = (Math.random() * 2 - 1) * weite;
const y = (Math.random() * 2 - 1) * weite;
flaeche.style.transform = "translate(" + x.toFixed(1) + "px, " + y.toFixed(1) + "px)";

Das ist der Kern. Math.random() liefert eine Zufallszahl zwischen 0 und 1; die Rechnung * 2 - 1 spreizt sie auf den Bereich von −1 bis +1, sodass die Fläche mal nach links und mal nach rechts springt. Multipliziert mit weite ergibt das die tatsächliche Verschiebung in Pixeln. Der Faktor (1 - anteil) ist das Abklingen: Er beginnt bei 1 und läuft auf 0 zu, der Ausschlag wird also mit jedem Moment kleiner. transform: translate(…) verschiebt ein Element rein optisch, ohne dass die Seite darum herum neu umbricht — deshalb ruckelt nichts anderes mit.

requestAnimationFrame(schritt);

requestAnimationFrame bittet den Browser, die Funktion schritt vor dem nächsten Bildaufbau erneut aufzurufen — in der Regel 60-mal pro Sekunde. Weil sich schritt am Ende selbst wieder anmeldet, entsteht daraus eine Schleife, die genau im Takt des Bildschirms läuft. Das Original von 2004 benutzte stattdessen zwei ineinander verschachtelte for-Schleifen, die das Browserfenster mit window.moveBy() verschoben. Beides ist heute nicht mehr brauchbar: moveBy wird von Browsern blockiert, und eine for-Schleife läuft in einem Rutsch durch, ohne dass zwischendurch etwas zu sehen wäre.

Zum Anpassen: DAUER bestimmt, wie lange gewackelt wird, AUSSCHLAG wie viele Pixel ein Stärkepunkt wert ist. Wollt ihr statt eines kleinen Kastens die ganze Seite beben lassen, ersetzt ihr im Script flaeche durch document.body. Und wer ein waagerechtes Rütteln möchte, setzt einfach y fest auf 0.

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Verschiedenes