Beispielarbeiten · Software & Web-Apps
Scroll-Animation: Text, Bild, Video und Raum reagieren auf jede Scrollbewegung
Eine Demo-Webseite im Stil moderner Agenturseiten: weiches Scrollen, Text, der Wort für Wort erscheint, ein fest stehender Abschnitt mit Zeitleiste, Parallax, seitwärts laufende Karten, ein Video und eine Kamerafahrt im Raum, die der Scrollbewegung folgen. Gebaut mit eigener, kleiner Technik ohne fremde Bibliothek.
Musterarbeit (Demo), kein Kundenauftrag. Gebaut als Probeaufgabe mit erfundenen Beispieldaten; die Prüfzahlen unten stammen aus dem automatischen Prüflauf und sind nicht geschönt.
Was gebaut wurde
- Weiches Scrollen, Anker-Sprünge, Fortschrittsanzeige und Abschnitte, die beim Erreichen reagieren
- Fest stehender Abschnitt mit Zeitleiste: mehrere Schritte erscheinen nacheinander, ohne Springen
- Text wird nach Buchstaben, Wörtern oder Zeilen aufgebaut; der Originaltext bleibt für Screenreader erhalten
- Parallax, seitwärts laufende Sektion, Zähler, Bild-Enthüllung, Magnet-Button und Laufband
- Video und Raumkamera folgen der Scrollbewegung; bei eingestellter Bewegungsreduktion läuft alles ohne Animation. Beispielfirma und Zahlen erfunden
Wie geprüft wurde
Automatischer Prüflauf vom 29.10.2026, aus dem Protokoll (Testdaten erfunden, Zahlen gemessen):
- Demo-Seite: 32 von 32 Messungen in sechs Wirkungsgruppen bestanden (Smooth Scroll, Trigger, Pinning+Zeitleiste, Text-Split, Parallax/Horizontal/Zaehler/Reveal/Magnet/Marquee, Video-/3D-Scrub)
- Median 16.7 ms je Bild, laengster Long-Task 0 ms
- reduced-motion schaltet ab
- Engine 7.3 KB gzip
Alle Prüffälle (46 von 46 grün)
- ✓ smooth aktiv
- ✓ smooth viele zwischenwerte
- ✓ smooth endet am ziel
- ✓ smooth nie rueckwaerts
- ✓ smooth tastatur ende
- ✓ smooth anker landet am ziel
- ✓ trigger fortschritt gleich python
- ✓ trigger mitte ist halb
- ✓ trigger klasse an und zurueck aus
- ✓ pin abstandhalter hoehe stimmt
- ✓ pin bleibt stehen ohne springen
- ✓ zeitleiste schritte nacheinander
- ✓ zeitleiste balken folgt scroll
- ✓ pin gibt nach ende frei
- ✓ split aria label ist originaltext
- ✓ split zahl woerter und buchstaben
- ✓ split teile aria hidden
- ✓ split reveal endet sichtbar
- ✓ split scrub nach wort hervorgehoben
- ✓ split zeilen erkannt
- ✓ marquee laeuft per animation
- ✓ magnet zieht zum zeiger und gibt frei
- ✓ zaehler laufen hoch auf zielwert
- ✓ bild reveal per clip path
- ✓ parallax faktor stimmt
- ✓ horizontal sektion folgt scroll
- ✓ horizontal sektion hoehe gleich weg
- ✓ video zeit folgt scroll
- ✓ video bild aendert sich
- ✓ kamera position gleich python pfad
- ✓ kamera fliegt entlang der strecke
- ✓ kamera bild aendert sich
- ✓ engine geladen
- ✓ keine js fehler
- ✓ leistung median unter 45ms
- ✓ leistung kein long task ueber 600ms
- ✓ reduziert modus gemeldet und kein smooth
- ✓ reduziert kein pinning keine marquee
- ✓ reduziert text endzustand sofort
- ✓ reduziert horizontale sektion nativ scrollbar
- ✓ reduziert scroll wird nicht abgefangen
- ✓ handy kein seitwaertsscrollen
- ✓ handy pin funktioniert
- ✓ gegenprobe ohne engine faellt durch
- ✓ engine unter 15 kb gzip
- ✓ alle sechs effektgruppen gemessen
Grenzen
Was diese Probe nicht abdeckt, steht hier, damit niemand mehr erwartet:
- gemessen in Chromium headless mit Software-WebGL; echte Grafikkarten, Safari/iOS und Firefox nicht
- Bildrate und Long-Tasks sind grobe Werte aus dem Testrechner, kein Versprechen fuer schwache Handys
- Weiches Scrollen ersetzt nicht das native Verhalten bei Touch und Tastatur - beides bleibt bewusst nativ
- Video-Scrub braucht ein Video mit vielen Schluesselbildern (kurze GOP); Hochformat-Fassung fuer Handy je Projekt
- Wirkung auf Verkauf oder Verweildauer wird nicht zugesagt; geprueft wird die Technik, nicht die Conversion
So etwas für deinen Betrieb?
Beschreib kurz, was du brauchst. Du bekommst einen Festpreis, bevor ich anfange; ohne dein Ja passiert nichts.