Mort au scroll fade

 (dbushell.com)
1 points par GN⁺ 2026-03-19 | 1 commentaires | Partager sur WhatsApp
  • L’article critique l’effet de “scroll fade”, qui fait apparaître progressivement des éléments lors du défilement d’un site web, en soulignant son inconfort visuel et la complexité qu’il ajoute au développement
  • Il explique que la plupart des implémentations nuisent à l’expérience utilisateur à cause d’effets de transition excessifs et d’un timing inadapté, tout en alourdissant le travail des développeurs
  • Il évoque les problèmes d’accessibilité et les effets négatifs bien réels sur les utilisateurs, notamment ceux souffrant de troubles vestibulaires (vestibular disorders)
  • Ces effets peuvent aussi entraîner une baisse des performances et une dégradation des Core Web Vitals (comme le LCP), et sont souvent appliqués sans tests ni validation suffisants
  • L’auteur affirme que le scroll fade n’est pas une solution rapide, mais une fonctionnalité complexe qui doit être conçue dès le départ, et appelle clairement à cesser de l’utiliser

Les problèmes du scroll fade

  • Le scroll fade est un effet visuel dans lequel des éléments apparaissent progressivement quand l’utilisateur fait défiler la page, souvent avec une transformation (transform) sur l’axe Y
    • L’auteur le décrit comme une « expérience horrible » et souligne qu’il est appliqué de la même manière à tous les utilisateurs
  • Il reconnaît que l’effet pourrait éventuellement fonctionner s’il était réglé avec finesse, mais estime que, dans la plupart des cas, il est utilisé de manière excessive et devient visuellement désagréable
    • Il cite le cas fréquent où, à la toute fin d’un projet, quelqu’un demande soudain de « mettre un fade sur tous les éléments »
  • L’auteur y voit une mauvaise tentative de lutter contre l’ennui, qui rend en réalité le site plus grossier

Accessibilité et impact utilisateur

  • Plusieurs développeurs avancent les problèmes d’accessibilité comme argument principal contre cette pratique
    • Les utilisateurs souffrant de troubles vestibulaires (vestibular disorders) peuvent être gênés par les effets de mouvement
    • Une certaine protection est possible via la media query CSS prefers-reduced-motion, mais l’auteur estime que le mouvement devrait être désactivé par défaut et activé seulement sur choix explicite
  • Il pointe aussi des problèmes de surcharge cognitive et de distraction de l’attention
    • Il note en particulier que les sites conçus sur des appareils Apple se comportent souvent différemment sous Windows, Linux ou Android

Tests et performances

  • L’auteur insiste sur la nécessité de procéder à de vrais tests utilisateurs et à une validation des performances avant d’appliquer un effet de scroll fade
    • Il faut notamment vérifier que les utilisateurs peuvent toujours accomplir leurs tâches et que le taux de rebond n’augmente pas
    • Si l’on n’a pas l’intention de tester, il avertit qu’il vaut mieux ne pas prendre le risque
  • Il mentionne que son script s’appuyait sur la technique “This CSS Will Self-Destruct” de Scott Jehl
    • Celle-ci est présentée comme une mesure de protection lorsque JavaScript est désactivé

Impact sur les Core Web Vitals et le SEO

  • Il souligne que le scroll fade risque fortement de dégrader des indicateurs de Core Web Vitals comme le Largest Contentful Paint (LCP)
    • Il ne fournit pas de données directes, mais dit avoir déjà vu des sites affichant un « LCP catastrophique »
  • À propos du SEO, il adopte un ton ironiquement sceptique, allant jusqu’à dire qu’on entend aussi que Google fournit du contenu de mauvaise qualité
    • Il explique néanmoins qu’il espère, avec ce billet de blog, contribuer à faire sortir cet effet de mode

Conclusion : interdiction du scroll fade

  • Sous le titre « 5 effets de scroll fade géniaux », l’auteur conclut de manière satirique en répétant cinq fois : « ne le faites pas »
  • Il rappelle que le scroll fade n’est pas une solution rapide, mais une fonctionnalité complexe qui doit être pensée dès la conception en tenant compte de toute la structure du site
  • Il termine sur une boutade en suggérant que les développeurs devraient déclarer collectivement que c’est techniquement impossible
  • Son message final est sans ambiguïté : « Mort au scroll fade »

À lire aussi

1 commentaires

 
GN⁺ 2026-03-19
Avis sur Hacker News

  • Il y a un élément lié au scroll que je déteste vraiment
    ce sont les en-têtes sticky qui disparaissent quand on descend et réapparaissent quand on remonte
    Ce clignotement à chaque mouvement de la page vers le haut ou le bas est extrêmement agaçant
    Les supprimer avec quelque chose comme uBlock fait aussi disparaître l’en-tête tout en haut de la page, ce qui pose problème

    • Tout à fait d’accord. J’ai l’habitude de garder la phrase que je lis tout en haut de l’écran, donc si je veux relire une phrase, je dois à chaque fois repasser l’en-tête
    • C’est facile à utiliser surtout sur desktop, mais il existe une solution assez satisfaisante
      Je recommande le script Kill Sticky Headers
    • Safari a une fonction « Remove Distracting Elements »
      Certains sites sont tellement dispersants qu’on a vraiment l’impression de devoir y aller avec un outil de lutte antiparasitaire

  • Le mode lecteur ne devrait pas être un mode spécial, mais l’expérience de navigation par défaut
    Si on veut du style tape-à-l’œil, ce devrait plutôt être un « Clown Mode » à activer

    • Moi, je voudrais un mode lecteur qui rende toute la page comme une longue image, puis permette de faire défiler ça
      J’aimerais que le navigateur mente à la page en lui faisant croire que « tout le contenu est déjà à l’écran »
    • Si le mode lecteur n’est pas activé par défaut, c’est justement pour que les créateurs de sites ne puissent pas casser volontairement cette fonctionnalité
    • Sur macOS et iOS, on peut définir le mode lecteur comme valeur par défaut
    • Ce serait bien qu’à l’ouverture d’une page, le mode lecteur s’active automatiquement, et qu’on puisse le désactiver avec Échap en quelques secondes si nécessaire
    • L’expression « Clown Mode » me fait trop rire. Ça me rappelle l’ancien thème « Fisher-Price » de Windows XP

  • Au début, je pensais qu’il s’agissait d’iOS
    Depuis iOS 26, le haut des pages web a un fondu gris qui apparaît, et je trouve ça insupportable
    La couleur du texte change dynamiquement, ce qui attire constamment le regard vers le haut
    Apple ne peut pas ignorer ce type de distraction visuelle, donc je me demande vraiment pourquoi ils ont choisi ce design

    • Encore pire, l’app Music d’iOS a déplacé les contrôles de lecture au-dessus du contenu en les superposant avec transparence
      Le contenu situé en dessous a aussi un effet de fondu au scroll
    • Quand on active « Reduce Transparency », le haut et le bas deviennent simplement des espaces blancs vides
      Ça me fait rire, parce que mon iPhone reprend alors l’apparence de l’époque du bouton Home

  • On dit que cet effet s’est répandu sur tout le web, mais c’est la première fois que je le vois
    Quand une animation bouge devant mes yeux, je n’arrive pas à lire
    Cela dit, l’animation de poisson rouge en bas est sympa, j’aimerais bien la réutiliser ailleurs

    • Je vois souvent cet effet sur les sites d’Anthropic
      On le voit clairement par exemple sur la page Claude Agents
      On dirait que le guide de style de Claude s’est propagé à d’autres sites basés sur des LLM
    • En réalité, ce genre d’effet est très courant sur les pages marketing SaaS
      Il ne s’agit pas seulement de fondus d’apparition, on voit aussi très souvent des éléments qui glissent depuis le côté
    • Moi aussi, pendant une refonte de site, Claude m’avait suggéré ce type d’animation
      Si Claude le recommande avec autant d’assurance, c’est peut-être le signe que beaucoup de gens l’ont déjà adopté
    • Quand c’est bien fait, ça peut devenir un effet subtil et agréable qui guide le regard
      Ce site est un exemple volontairement exagéré pour le montrer
    • Des sites comme history-of-animation.webflow.io peuvent aussi servir de référence

  • Je pense que cette mode du scroll fade vient d’un malentendu né d’un bug
    Au départ, c’était un clignotement causé par le lazy loading des images
    Puis des designers l’ont pris pour un effet intentionnel et se sont dit : « faisons un joli fondu »

    • Mais en réalité, c’est surtout du surdesign pour faire « stylé »
      Il y a une tendance à se focaliser sur le scroll lui-même plutôt que sur le contenu
    • Cela dit, ça me semble quand même être une tendance distincte, pas juste un simple bug

  • Je vais aller encore plus loin : le scroll parallaxe devrait lui aussi disparaître
    J’aimerais que toutes les animations liées au scroll cessent

    • Le scroll devrait simplement consister à déplacer de haut en bas une fenêtre de taille fixe, rien de plus
    • Bien sûr, une parallaxe d’image discrète peut passer
      Mais voir n’importe quel élément bouger à une vitesse différente de façon arbitraire, c’est affreux
    • Je ne suis pas opposé à l’animation en soi, mais quand on en abuse sans but, c’est comme un plat noyé sous trop de ketchup
    • Je déteste particulièrement les surcharges des événements de scroll
      Ça casse le défilement fluide de Vimium

  • Cette page est vraiment le summum du contenu qui donne la nausée
    Je souffre du mal des transports sévère depuis l’enfance, et aujourd’hui encore le bus ou l’ascenseur sont une épreuve
    Quelques secondes sur cette page m’ont suffi pour avoir envie de vomir, et je suis tout de suite passé en mode lecteur
    Malgré tout, je suis content de voir que la sensibilisation à ce problème augmente

    • Moi aussi, j’ai exactement le même niveau de mal des transports
      Si je ne suis pas au volant, c’est pénible, et les autres ne comprennent pas
      Surtout les habitudes de conduite avec accélérations et freinages répétés, c’est une vraie torture
    • Ça me rassure de ne pas être le seul
      Il m’a suffi de regarder ça quelques minutes pour déclencher une migraine
    • Je n’ai pourtant pas le mal des transports, mais cette page m’a quand même donné la nausée
      C’était vraiment une expérience horrible

  • J’ai déjà travaillé avec un client qui adorait le scrolljacking
    Puis il a découvert l’effet parallaxe et il est devenu complètement accro, avant de finir par me licencier
    Aujourd’hui, ce site rame sur tous les appareils sauf l’iPhone 16+

  • Un dernier détail saute aux yeux : les zones où, une fois sélectionné, le texte devient invisible
    En pratique, il n’y a presque que les sites pénibles à lire qui vont jusqu’à ce genre de petits détails

    • En général, ils vont jusqu’à bloquer complètement la sélection du texte pour protéger leur « texte sacré »

  • Quand je gère des animations, j’utilise une règle très simple

    animationCount = 0
animateElement(el) {
  el.animate({duration: BASE_DURATION / animationCount})
  animationCount++
}

    Le principe consiste à réduire la durée des animations au fur et à mesure qu’elles se répètent
    Le début est intense, puis ça devient progressivement plus court, ce qui donne au final une impression de vivacité