Tod dem Scroll-Fade

(dbushell.com)

1 Punkte von GN⁺ 2026-03-19 | 2 Kommentare | Auf WhatsApp teilen

Kritisiert den „Scroll-Fade“-Effekt, bei dem Elemente beim Scrollen auf Websites allmählich eingeblendet werden, und weist auf visuelle Unannehmlichkeiten sowie zusätzliche Entwicklungskomplexität hin
Erklärt, dass die meisten Implementierungen durch übertriebene Übergangseffekte und schlechtes Timing die User Experience verschlechtern und auch Entwickler belasten
Erwähnt Barrierefreiheitsprobleme und die negativen Auswirkungen auf reale Nutzer, etwa bei Vestibularstörungen (vestibular disorders)
Solche Effekte können zu Performance-Einbußen und schlechteren Core Web Vitals (z. B. LCP) führen und werden oft ohne ausreichende Tests und Validierung eingesetzt
Der Beitrag betont, dass Scroll-Fades keine schnelle Lösung, sondern eine komplexe Funktion sind, die von Anfang an mitgedacht werden muss, und fordert entschieden dazu auf, sie nicht mehr zu verwenden

Die Probleme von Scroll-Fades

Scroll-Fade ist ein visueller Effekt, bei dem Elemente allmählich erscheinen, wenn Nutzer die Seite nach unten scrollen; oft wird er zusammen mit einer Transformation auf der Y-Achse (transform) verwendet
- Der Autor bezeichnet das als „schreckliche Erfahrung“ und merkt an, dass der Effekt allen Nutzern gleichermaßen aufgezwungen wird
Fein abgestimmt könnte der Effekt vielleicht akzeptabel sein, doch in den meisten Fällen wird er übertrieben eingesetzt und wirkt visuell unangenehm
- Erwähnt wird der Fall, dass kurz vor Projektabschluss noch die Anforderung kommt, „alle Elemente mit Fade zu versehen“
Der Autor sieht darin einen „falschen Versuch, Langeweile zu beseitigen“ und urteilt, dass die Website dadurch in Wirklichkeit nur billiger wirkt

Barrierefreiheit und Auswirkungen auf Nutzer

Mehrere Entwickler nennen Barrierefreiheit (accessibility) als wichtigstes Gegenargument
- Besonders Nutzer mit Vestibularstörungen (vestibular disorders) können durch Bewegungseffekte beeinträchtigt werden
- Mit der CSS-Media-Query prefers-reduced-motion lässt sich ein gewisser Schutz bieten, doch der Autor argumentiert, dass Bewegung standardmäßig deaktiviert sein und nur per Opt-in aktiviert werden sollte
Ebenfalls genannt werden kognitive Überlastung (cognitive overload) und Ablenkung
- Insbesondere wird erwähnt, dass auf Apple-Geräten entwickelte Websites sich unter Windows, Linux und Android oft anders verhalten

Test- und Performance-Probleme

Betont wird die Notwendigkeit von Tests mit realen Nutzern und Performance-Validierung, bevor Scroll-Fade-Effekte eingesetzt werden
- Es müsse geprüft werden, ob Nutzer ihre Aufgaben weiterhin erledigen können und ob sich etwa die Bounce Rate erhöht
- Wer nicht bereit ist zu testen, sollte „das Risiko gar nicht erst eingehen“
Der Autor erwähnt, dass sein eigenes Skript die Technik „This CSS Will Self-Destruct“ von Scott Jehl verwendet
- Sie wird als Schutzmechanismus für den Fall vorgestellt, dass JavaScript deaktiviert ist

Auswirkungen auf Core Web Vitals und SEO

Es wird darauf hingewiesen, dass Scroll-Fades wahrscheinlich Kennzahlen der Core Web Vitals wie Largest Contentful Paint (LCP) verschlechtern
- Zwar werden keine direkten Daten präsentiert, doch der Autor sagt, dass von ihm geprüfte Websites in der Vergangenheit „schreckliche LCP-Werte“ gezeigt hätten
Beim Thema SEO zeigt sich eine ironisch-skeptische Haltung, etwa mit der Bemerkung, Google liefere ohnehin minderwertige Inhalte
- Zugleich macht der Autor deutlich, dass der Blogbeitrag dazu beitragen soll, diesen Effekt aus der Mode zu bringen

Fazit: Verbotserklärung für Scroll-Fades

Unter der Überschrift „5 tolle Scroll-Fade-Effekte“ endet der Text satirisch damit, fünfmal „Mach es nicht“ zu wiederholen
Es wird hervorgehoben, dass Scroll-Fades keine schnelle Lösung sind, sondern eine komplexe Funktion, die unter Berücksichtigung der gesamten Website-Struktur von Anfang an entworfen werden muss
Der Beitrag endet mit dem scherzhaften Vorschlag, Entwickler sollten gemeinsam erklären, dass es technisch unmöglich ist
Die Schlussbotschaft ist eindeutig: „Tod dem Scroll-Fade“

2 Kommentare

roxie 8 일 전

Ich denke, es wäre in Ordnung, wenn man die Animation auf unter 100 ms hält...

Viel beeindruckender sind allerdings die 88x31-Badges am unteren Rand dieser Website.

GN⁺ 2026-03-19

Hacker-News-Kommentare

Es gibt ein scrollbezogenes Element, das ich persönlich wirklich hasse
nämlich Sticky Header, die verschwinden, wenn man nach unten scrollt, und wieder erscheinen, wenn man nach oben scrollt
Dieses ständige Aufblinken bei jeder Bewegung der Seite nach oben und unten ist unglaublich störend
Wenn man sie mit etwas wie uBlock entfernt, verschwindet der Header auch ganz oben auf der Seite, was dann ebenfalls unpraktisch ist
- Stimme vollkommen zu. Ich habe die Angewohnheit, den Satz, den ich gerade lese, immer ganz oben auf dem Bildschirm zu halten, daher muss ich beim erneuten Lesen jedes Mal erst am Header vorbei
- Eine ziemlich zufriedenstellende Lösung gibt es, auch wenn sie sich nur auf dem Desktop leicht nutzen lässt
  Ich empfehle das Skript Kill Sticky Headers
- Safari hat die Funktion „Ablenkende Elemente entfernen“
  Manche Websites sind so unruhig, dass man wirklich ein „Schädlingsbekämpfungswerkzeug“ mitbringen müsste
Der „Reader Mode“ sollte kein spezieller Modus sein, sondern die Standard-Browsing-Erfahrung
Wenn man unbedingt aufwendiges Styling will, sollte man stattdessen den „Clown Mode“ aktivieren
- Ich hätte gern einen Reader Mode, der die ganze Seite als ein einziges langes Bild rendert und dann dieses scrollt
  Der Browser sollte die Seite glauben lassen, dass „der gesamte Inhalt bereits auf dem Bildschirm ist“
- Dass der Reader Mode nicht Standard ist, liegt eher daran, dass Website-Betreiber ihn dann nicht absichtlich kaputtmachen könnten
- Unter macOS und iOS kann man den Reader Mode als Standard festlegen
- Es wäre schön, wenn beim Öffnen einer Seite automatisch der Reader Mode aktiviert würde und man ihn bei Bedarf innerhalb weniger Sekunden mit ESC wieder ausschalten könnte
- Die Formulierung „Clown Mode“ ist unglaublich lustig. Sie erinnert mich an das alte „Fisher-Price“ Theme von Windows XP
Zuerst dachte ich, es gehe um iOS
Seit iOS 26 gibt es oben auf Webseiten einen grauen Fade-out-Effekt, und der ist extrem störend
Da sich die Textfarbe dynamisch verändert, wird mein Blick ständig nach oben gezogen
Apple kann unmöglich nicht wissen, wie stark so etwas visuell ablenkt, deshalb frage ich mich, warum man sich für dieses Design entschieden hat
- Noch schlimmer: In der Music-App von iOS wurden die Wiedergabesteuerungen über den Inhalt gelegt und transparent überblendet
  Auch der darunterliegende Inhalt bekommt diesen Scroll-Fade-Effekt
- Wenn man „Transparenz reduzieren“ aktiviert, werden Ober- und Unterkante einfach zu weißen leeren Flächen
  Dadurch sieht mein iPhone wieder aus wie zu Zeiten des Home-Buttons, was ich ziemlich komisch finde
Es heißt zwar, dieser Effekt habe sich im Web insgesamt verbreitet, aber ich habe ihn diesmal zum ersten Mal gesehen
Wenn sich direkt vor meinen Augen eine Animation bewegt, kann ich keinen Text lesen
Die Goldfisch-Animation unten finde ich allerdings cool und würde sie gern separat irgendwo verwenden
- Auf den Websites von Anthropic sieht man diesen Effekt oft
  Zum Beispiel ist er auf der Claude-Agents-Seite deutlich zu erkennen
  Es wirkt, als hätte sich Claudes Styleguide auch auf andere LLM-basierte Websites ausgebreitet
- Tatsächlich ist so ein Effekt auf SaaS-Marketingseiten sehr verbreitet
  Nicht nur simples Fade-in, sondern oft auch ein seitliches Hineingleiten
- Ich war gerade selbst bei einem Site-Redesign, und Claude hatte so eine Animation vorgeschlagen
  Wenn Claude sie so selbstbewusst empfiehlt, könnte das bedeuten, dass schon sehr viele Leute das nachgemacht haben
- Gut umgesetzt kann das ein subtiler und angenehmer Effekt sein, der den Blick lenkt
  Diese Website ist ein Beispiel, das es absichtlich übertreibt
- Seiten wie history-of-animation.webflow.io sind ebenfalls einen Blick wert
Ich denke, dieser Scroll-Fade-Trend beruht auf einem Missverständnis, das aus einem Bug entstanden ist
Ursprünglich war das nur ein Flackern durch Lazy Loading bei Bildern
Dann haben Designer das wohl für einen beabsichtigten Effekt gehalten und beschlossen: „Dann lassen wir es hübsch einblenden“
- In Wirklichkeit ist das aber einfach nur übertriebene Gestaltung, damit es „cool aussieht“
  Es gibt die Tendenz, sich mehr auf das Scrollen selbst als auf den Inhalt zu fixieren
- Trotzdem fühlt sich das eher wie ein eigener Trend an und nicht einfach nur wie ein Bug
Ich würde sogar noch weitergehen — auch Parallax Scrolling sollte verschwinden
Ich wünschte, sämtliche Scroll-Animationen würden abgeschafft
- Scrollen sollte einfach nur die schlichte Bewegung eines Fensters fester Größe nach oben und unten sein
- Natürlich ist dezente Bild-Parallaxe in Ordnung
  Aber wenn irgendwelche Elemente wahllos mit unterschiedlicher Geschwindigkeit herumfahren, ist das das Schlimmste
- Ich bin nicht grundsätzlich gegen Animationen, aber wenn sie ohne Zweck inflationär eingesetzt werden, sind sie wie Essen, das mit zu viel Ketchup übergossen wurde
- Besonders hasse ich es, wenn Scroll-Events überschrieben werden
  Das ruiniert das sanfte Scrollen von Vimium
Diese Seite ist wirklich das absolute Maximum an Übelkeitserzeugung
Ich leide seit meiner Kindheit unter starker Reisekrankheit, und selbst heute sind Busse und Aufzüge für mich eine Qual
Schon ein paar Sekunden auf dieser Seite haben gereicht, damit mir übel wurde, und ich habe sofort in den Reader Mode gewechselt
Trotzdem freut es mich, dass das Bewusstsein für solche Probleme zunimmt
- Bei mir ist es genauso schlimm
  Wenn ich nicht auf dem Fahrersitz bin, ist es furchtbar, und andere Leute verstehen das nicht
  Besonders ständiges Beschleunigen und Abbremsen beim Fahren ist für mich wie Folter
- Gut zu wissen, dass ich nicht der Einzige bin
  Schon nach wenigen Minuten bekam ich fast Migräne
- Ich habe eigentlich keine Reisekrankheit und mir wurde von dieser Seite trotzdem übel
  Es war wirklich eine furchtbare Erfahrung
Ich habe früher mit einem Kunden gearbeitet, der Scrolljacking liebte
Als er Parallax-Effekte entdeckt hatte, war er komplett besessen davon und hat mich am Ende gefeuert
Heute ruckelt diese Website auf praktisch jedem Gerät außer einem iPhone 16+
Das letzte Detail ist mir aufgefallen — der Teil, bei dem ausgewählter Text unsichtbar gemacht wird
Realistisch gesehen gibt es kaum Websites, die so sehr auf solche Details achten und gleichzeitig schwer lesbar sind
- Normalerweise wird gleich die ganze Textauswahl blockiert, um den „heiligen Text“ zu schützen
Wenn ich mit Animationen arbeite, verwende ich eine sehr einfache Regel
```
animationCount = 0
animateElement(el) {
  el.animate({duration: BASE_DURATION / animationCount})
  animationCount++
}
```
Dabei verkürze ich die Dauer der Animation, je öfter sie wiederholt wird
Anfangs ist sie stark, wird dann aber immer kürzer und erzeugt insgesamt ein leichtes, spritziges Gefühl