tearoffpad
Abreißblock als Web Component
Personal · Mai 2023
Case Study
Herausforderung
Eine Abreißblock-Animation als wiederverwendbares Web Component umsetzen — ohne Framework, mit physikalisch wirkender Drag-Interaktion auf dem Desktop und Swipe-Gesten auf Mobilgeräten.
Ansatz
Plain-JavaScript-Component mit Custom Attributes am HTML-Element, zur Laufzeit generierte Animationen per DOM- und Stylesheet-Manipulation, Hammer.js für Touch-Gesten und ein Python-Skript zur Generierung von SVG-Mockdaten.
Ergebnis
Funktionsfähiges Component mit Refresh- und Imprint-Buttons, getestet auf Chrome, Firefox, Edge und Safari sowie mobil auf Android und iOS — inklusive Accessibility-Vorkehrungen wie ARIA-Labels und Tastatur-Fokussierbarkeit.
Was passiert, wenn man einen Abreißblock ins Web holt? tearoffpad ist ein Web Component in reinem JavaScript — ganz ohne Framework —, das eine Abreißblock-Animation in jede HTML-Seite bringt. Als Inhalt dienen Sets von SVG-Bildern: Pro Set wird zufällig ein Bild ausgewählt und in fester Reihenfolge auf dem Block angezeigt. Konfiguriert wird alles über Custom Attributes direkt am HTML-Element — von den Hintergrundfarben über Seiten- und Variantenanzahl bis zur Button-Position und den ARIA-Labels.
Desktop — Die aktuelle Seite wird per Drag abgerissen: Die Zuggeschwindigkeit bestimmt Drag- und Abreißanimation, berechnet aus der letzten Mausposition und Zufallswerten. Verlässt die Maus das Blatt, bevor der maximale Abreißwinkel erreicht ist, reißt es nicht ab, sondern schwingt und bleibt hängen. Der Refresh-Button setzt den Block zurück und würfelt die Bildliste neu; der Imprint-Button reißt alle Blätter ab und führt zum Impressum.
Mobile — Auf Touch-Geräten wird per Swipe abgerissen: links, rechts, oben oder unten. Die Swipe-Animation wird dynamisch generiert — das Blatt wird mit abnehmender Deckkraft aus dem Sichtfeld gezogen. Für die Gestenerkennung kommt Hammer.js zum Einsatz; die Buttons funktionieren wie auf dem Desktop.
Bis zu 26 Seiten ([a–z]) mit jeweils bis zu vier Varianten lassen sich über data-pagesamount und data-subpageamount konfigurieren. Ein Python-Skript (svgmockdatagenerator.py) generiert auf Wunsch komplette SVG-Mockdaten-Sets — inklusive Accessibility-Tags wie title, desc und aria-labelledby für Screenreader. Da die Animationen zur Laufzeit per Stylesheet-Manipulation entstehen, braucht das Component echtes Hosting: Lokal geöffnete HTML-Dateien scheitern an CORS. Kompatibilität wurde für Chrome, Firefox, Edge und Safari sowie Android und iOS getestet.