Muerte al scroll fade

• Critica el efecto de ‘scroll fade’, en el que los elementos aparecen gradualmente al hacer scroll en un sitio web, y señala tanto la incomodidad visual como la complejidad adicional en el desarrollo
• Explica que la mayoría de las implementaciones, por sus transiciones excesivas y tiempos inadecuados, terminan perjudicando la experiencia de usuario y también cargando de trabajo a los desarrolladores
• Se mencionan problemas de accesibilidad y efectos negativos reales sobre usuarios con trastornos vestibulares (vestibular disorders)
• Estos efectos también pueden provocar degradación del rendimiento y empeorar Core Web Vitals (como LCP), y muchas veces se aplican sin pruebas ni validación suficientes
• El texto afirma que el scroll fade no es una solución rápida, sino una función compleja que debe diseñarse desde el principio, y pide dejar de usarlo de forma tajante

---

Problemas del scroll fade

• El scroll fade es un efecto visual en el que los elementos aparecen gradualmente cuando el usuario baja por la página, y a menudo se usa junto con transformaciones en el eje Y (transform)
  • El texto lo describe como una “experiencia horrible” y menciona que se aplica por igual a todos los usuarios
• Señala que podría estar bien si se ajustara con delicadeza, pero que en la mayoría de los casos se usa en exceso y resulta visualmente desagradable
  • Menciona casos en los que, cuando el proyecto ya está casi terminado, aparece la petición de “aplicar fade a todos los elementos”
• El autor lo considera “un intento equivocado de quitarle lo aburrido” y evalúa que, en realidad, vuelve el sitio más tosco

Accesibilidad e impacto en los usuarios

• Varios desarrolladores presentan los problemas de accesibilidad (accessibility) como su principal motivo de oposición
  • En especial, los usuarios con trastornos vestibulares (vestibular disorders) pueden experimentar malestar por los efectos de movimiento
  • Aunque CSS permite cierta protección mediante la media query prefers-reduced-motion, el autor sostiene que “el movimiento debería estar desactivado por defecto (opt-in)”
• También se señalan problemas de sobrecarga cognitiva (cognitive overload) y distracción
  • Se menciona especialmente que muchos sitios creados en dispositivos Apple funcionan de manera distinta en entornos Windows, Linux y Android

Problemas de pruebas y rendimiento

• Se enfatiza la necesidad de realizar pruebas con usuarios reales y validación de rendimiento antes de aplicar efectos de scroll fade
  • Hay que comprobar si los usuarios aún pueden completar sus tareas y si la tasa de rebote (bounce rate) no aumenta, entre otros puntos
  • Advierte que, si no existe disposición a probarlo, “no vale la pena asumir el riesgo”
• El autor menciona que su script utilizó la técnica “This CSS Will Self-Destruct” de Scott Jehl
  • Se la presenta como una forma de protección para cuando JavaScript está desactivado

Impacto en Core Web Vitals y SEO

• Señala que el scroll fade probablemente empeore métricas de Core Web Vitals como Largest Contentful Paint (LCP)
  • Aunque no presenta datos directos, comenta que sitios que revisó en el pasado mostraban un “LCP terrible”
• Sobre el impacto en SEO, adopta una postura escéptica y sarcástica, al decir que “también se dice que Google ofrece contenido de baja calidad”
  • Aun así, deja ver su intención de ayudar a sacar esta moda de circulación mediante la publicación del artículo

Conclusión: prohibido el scroll fade

• Cierra de forma satírica bajo el título “5 efectos geniales de scroll fade”, repitiendo cinco veces “no lo hagas”
• Reitera que el scroll fade no es una solución rápida, sino una función compleja que debe diseñarse desde el inicio teniendo en cuenta toda la estructura del sitio
• Termina con la broma de que los desarrolladores deberían declarar colectivamente que “técnicamente no es posible”
• El mensaje final es claro: “Muerte al scroll fade”

[GN⁺]

Opiniones en Hacker News

• Hay un elemento relacionado con el scroll que personalmente detesto
  son los headers sticky que desaparecen al bajar y vuelven a aparecer al subir
  Ese parpadeo cada vez que mueves la página hacia arriba o abajo me resulta muy molesto
  Si los eliminas con algo como uBlock, el header también desaparece incluso cuando estás al inicio de la página, lo cual es problemático

  • Totalmente de acuerdo. Tengo la costumbre de mantener la oración que estoy leyendo siempre en la parte superior de la pantalla, así que cada vez tengo que pasar por encima del header para releer una oración
  • Solo es fácil de usar en escritorio, pero hay una solución bastante satisfactoria
    Recomiendo el script Kill Sticky Headers
  • Safari tiene la función “Remove Distracting Elements”
    Algunos sitios son tan distractores que de verdad parece que hubiera que llevar herramientas de control de plagas

• El “Reader Mode” no debería ser un modo especial, sino la experiencia de navegación predeterminada
  Más bien, si alguien quiere estilos vistosos, debería tener que activar el “Clown Mode”

  • Yo quiero un modo lector que renderice toda la página como una imagen larga y luego simplemente haga scroll sobre eso
    Ojalá el navegador pudiera engañar a la página haciéndole creer que “todo el contenido ya está en pantalla”
  • La razón por la que el modo lector no es el predeterminado es porque quieren evitar que los creadores de sitios web puedan romper esa función a propósito
  • En macOS y iOS se puede configurar el modo lector como predeterminado
  • Estaría bien que el modo lector se activara automáticamente al abrir la página y, si hace falta, poder desactivarlo con ESC en unos segundos
  • La expresión “Clown Mode” me da mucha risa. Me recuerda al tema “Fisher-Price” del viejo Windows XP

• Al principio pensé que hablaban de iOS
  Desde iOS 26 apareció un efecto en el que la parte superior de la página web se desvanece en gris, y es muy molesto
  Como el color del texto cambia dinámicamente, mi vista se sigue yendo hacia arriba
  Apple no puede no saber que esto distrae visualmente, así que me pregunto por qué diseñaron algo así

  • Un caso todavía peor: la app Music de iOS movió los controles de reproducción encima del contenido y los dejó superpuestos con transparencia
    El contenido que está debajo también recibe ese fade al hacer scroll
  • Si activas “Reduce Transparency”, la parte superior e inferior se convierten simplemente en espacios en blanco
    Me da risa porque mi iPhone vuelve a verse como en la época del botón Home

• Dicen que este efecto ya se extendió por toda la web, pero yo lo vi por primera vez ahora
  Si hay una animación moviéndose frente a mis ojos, no puedo leer
  Aun así, la animación del pececillo dorado de abajo está buena y me gustaría reutilizarla aparte

  • Veo este efecto a menudo en sitios de Anthropic
    Por ejemplo, se nota claramente en la página de Claude Agents
    Parece que la guía de estilo de Claude también se propagó a otros sitios basados en LLM
  • En realidad, este tipo de efecto es muy común en páginas de marketing de SaaS
    No solo fades simples, también se usa mucho que entren deslizándose desde un lado
  • A mí también Claude me sugirió este tipo de animaciones durante un rediseño de sitio
    Si Claude las recomienda con tanta seguridad, quizá significa que ya mucha gente las copió
  • Si está bien implementado, puede ser un efecto sutil y agradable para guiar la mirada
    Este sitio es un ejemplo que lo muestra de forma exagerada a propósito
  • También vale la pena mirar sitios como history-of-animation.webflow.io

• Creo que esta moda del scroll fade nació de un malentendido a partir de un bug
  Originalmente era el parpadeo causado por la carga diferida de imágenes (lazy loading)
  Luego los diseñadores confundieron eso con un efecto intencional y de ahí salió el “hagámoslo ver bonito con un fade”

  • Pero en la práctica esto no es más que exceso de diseño para que “se vea cool”
    Hay una tendencia a obsesionarse más con el scroll que con el contenido
  • Aun así, esto parece una corriente aparte, diferente de un simple bug

• Yo iría más lejos: también debería desaparecer el scroll parallax
  Ojalá desaparecieran todas las animaciones asociadas al scroll

  • El scroll debería ser simplemente mover hacia arriba y abajo una vista de tamaño fijo
  • Claro, un parallax sutil en imágenes está bien
    Pero que cualquier elemento se mueva a velocidades distintas porque sí es de lo peor
  • No estoy en contra de la animación en sí, pero cuando se usa sin propósito es como comida con demasiado ketchup
  • Me molesta especialmente cuando sobreescriben el evento de scroll
    Arruina el smooth scrolling de Vimium

• Esta página es realmente el jefe final de lo que provoca mareo
  Sufro mareos fuertes desde niño, y todavía hoy los buses y elevadores me hacen sufrir
  Con ver esta página unos segundos ya sentía que iba a vomitar, así que enseguida la puse en modo lector
  Aun así, me alegra que esté creciendo la conciencia sobre este tipo de problema

  • A mí me pasa exactamente lo mismo con los mareos
    Si no voy en el asiento del conductor, la paso mal, y la gente no lo entiende
    Sobre todo esos hábitos de manejo de acelerar y frenar repetidamente son una tortura
  • Menos mal que no soy el único
    Con verla unos minutos ya me estaba dando migraña
  • Yo no sufro de mareo por movimiento, pero esta página igual me dio náuseas
    Fue una experiencia realmente horrible

• Antes trabajé con un cliente que amaba el scrolljacking
  Cuando descubrió el efecto parallax, se obsesionó por completo y al final me despidió
  Ahora ese sitio va a tirones en todos los dispositivos salvo el iPhone 16+

• Hay un último detalle que salta a la vista: la parte donde hicieron que el texto no se vea al seleccionarlo
  En la práctica, casi no hay sitios difíciles de leer que se preocupen por esos detalles tan minuciosos

  • Normalmente directamente bloquean la selección de texto para proteger el “texto sagrado”

• Cuando trabajo con animaciones uso una regla muy simple

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

  La idea es reducir la duración de la animación conforme se repite
  Al principio impacta más, pero luego se vuelve cada vez más corta y en conjunto da una sensación ágil