Scroll fade, desapareça

• Critica o efeito de “scroll fade”, em que elementos aparecem gradualmente ao rolar a página em sites, apontando desconforto visual e complexidade de desenvolvimento
• Explica que a maioria das implementações, por causa de efeitos de transição excessivos e timing inadequado, prejudica a experiência do usuário e também sobrecarrega desenvolvedores
• Menciona problemas de acessibilidade e impactos negativos reais em usuários, incluindo pessoas com distúrbios vestibulares (vestibular disorders)
• Esse tipo de efeito pode levar a queda de desempenho e piora nos Core Web Vitals (como LCP), e muitas vezes é aplicado sem testes e validação suficientes
• O texto afirma que “scroll fade não é uma solução rápida, mas uma funcionalidade complexa que precisa ser projetada desde o início” e pede de forma enfática que seu uso seja interrompido

---

Problemas do scroll fade

• Scroll fade é um efeito visual em que elementos aparecem gradualmente quando o usuário desce a página, frequentemente usado junto com transformação no eixo Y (transform)
  • O texto o descreve como uma “experiência horrível” e menciona que ele é aplicado da mesma forma para todos os usuários
• Aponta que o efeito pode até funcionar se for ajustado com muito cuidado, mas na maioria dos casos é usado em excesso e acaba sendo visualmente desagradável
  • Cita casos em que, quando o projeto já está quase concluído, surge a exigência de “aplicar fade em todos os elementos”
• O autor vê isso como uma “tentativa equivocada de eliminar o tédio” e avalia que, na prática, o site fica mais grosseiro

Acessibilidade e impacto nos usuários

• Vários desenvolvedores apresentam questões de acessibilidade (accessibility) como principal motivo para rejeitar esse efeito
  • Em especial, usuários com distúrbios vestibulares (vestibular disorders) podem sentir desconforto por causa dos efeitos de movimento
  • Embora a media query CSS prefers-reduced-motion possa oferecer alguma proteção, o autor defende que “movimento” deveria vir desativado por padrão, com ativação opcional (opt-in)
• Também são apontados problemas de sobrecarga cognitiva (cognitive overload) e distração
  • O texto menciona que muitos sites feitos em dispositivos Apple acabam se comportando de forma diferente em ambientes Windows, Linux e Android

Testes e desempenho

• Enfatiza a necessidade de testes com usuários reais e validação de desempenho antes de aplicar o efeito de scroll fade
  • É preciso verificar se o usuário ainda consegue realizar tarefas normalmente e se a taxa de rejeição (bounce rate) não aumenta, entre outros pontos
  • Se não houver disposição para testar, o alerta é: “não assuma esse risco”
• O autor menciona que seu script utilizou a técnica “This CSS Will Self-Destruct”, de Scott Jehl
  • Ela é apresentada como uma forma de proteção para quando o JavaScript estiver desativado

Impacto em Core Web Vitals e SEO

• O texto aponta que o scroll fade tem grande chance de piorar métricas dos Core Web Vitals, como o Largest Contentful Paint (LCP)
  • Embora não apresente dados diretos, o autor afirma que sites verificados anteriormente mostravam um “LCP horrível”
• Sobre impacto em SEO, adota um tom satírico e cético, dizendo algo como “também dizem que o Google entrega conteúdo de baixa qualidade”
  • Ainda assim, deixa clara a intenção de usar o post para expulsar essa tendência de moda

Conclusão: declaração de proibição ao scroll fade

• Sob o título “5 efeitos incríveis de scroll fade”, o texto encerra de forma satírica repetindo “não faça isso” cinco vezes
• Reforça que scroll fade não é uma solução rápida, e sim uma funcionalidade complexa que deve ser pensada desde o início levando em conta toda a estrutura do site
• O autor termina com a piada de que desenvolvedores deveriam declarar coletivamente que isso é “tecnicamente impossível”
• A mensagem final é clara: “Scroll fade, desapareça (Death to scroll fade)”

[GN⁺]

Comentários do Hacker News

• Há um elemento relacionado a rolagem de que eu realmente não gosto
  é o cabeçalho fixo que some quando você rola para baixo e reaparece quando rola para cima
  aquele movimento piscando toda vez que a página sobe e desce me incomoda demais
  se eu removo com algo como o uBlock, o cabeçalho some até no topo da página, o que também é ruim

  • Concordo totalmente. Tenho o hábito de manter a frase que estou lendo sempre no topo da tela, então, para reler uma frase, preciso passar pelo cabeçalho toda vez
  • Só é fácil de usar no desktop, mas existe uma solução bem satisfatória
    recomendo o script Kill Sticky Headers
  • O Safari tem o recurso “Remove Distracting Elements”
    alguns sites são tão dispersivos que parece mesmo que você precisa levar uma “ferramenta de controle de pragas”

• O “Reader Mode” não deveria ser um modo especial, e sim a experiência padrão de navegação
  se alguém quiser um visual chamativo, aí sim deveria ativar o “Clown Mode”

  • Eu queria um modo leitor que renderizasse a página inteira como uma imagem longa e depois deixasse eu rolar aquilo
    como se o navegador enganasse a página dizendo: “todo o conteúdo já está na tela”
  • O motivo de o modo leitor não ser o padrão é a tentativa de impedir que os criadores dos sites consigam quebrar esse recurso de propósito
  • No macOS e no iOS, dá para definir o modo leitor como padrão
  • Seria ótimo se, ao abrir a página, o modo leitor fosse ativado automaticamente e, se necessário, eu pudesse desativá-lo com ESC em poucos segundos
  • A expressão “Clown Mode” é boa demais. Lembra o antigo tema “Fisher-Price” do Windows XP

• No começo achei que fosse sobre iOS
  a partir do iOS 26, surgiu esse efeito em que a parte superior da página desbota para cinza, e isso me incomoda muito
  como a cor do texto muda dinamicamente, meu olhar fica sendo puxado para cima o tempo todo
  a Apple certamente sabe que isso distrai visualmente, então fico me perguntando por que escolheu esse design

  • Num caso ainda pior, o app Music do iOS moveu os controles de reprodução para cima do conteúdo, deixando-os sobrepostos com transparência
    o conteúdo por baixo também recebe o efeito de scroll fade
  • Se você ativa “Reduce Transparency”, o topo e a base viram simplesmente espaços em branco
    meu iPhone fica parecendo os modelos da época do botão Home, o que até é engraçado

• Dizem que esse efeito se espalhou pela web, mas foi a primeira vez que vi
  se há uma animação se movendo diante dos meus olhos, eu simplesmente não consigo ler
  mesmo assim, a animação do peixinho dourado na parte de baixo ficou legal e eu até gostaria de reutilizá-la em outro lugar

  • Vejo esse efeito com frequência nos sites da Anthropic
    por exemplo, ele aparece claramente na página do Claude Agents
    parece que o guia de estilo do Claude se espalhou para outros sites baseados em LLM
  • Na verdade, esse tipo de efeito é muito comum em páginas de marketing de SaaS
    não só fade-in simples, mas também elementos deslizando de lado
  • Eu também estava redesenhando um site e o Claude sugeriu esse tipo de animação
    se o Claude recomenda isso com tanta confiança, talvez já seja um sinal de que muita gente está copiando
  • Quando é bem implementado, pode ser um efeito sutil e agradável para guiar o olhar
    este site é um exemplo que exagera de propósito para mostrar isso
  • Vale dar uma olhada também em history-of-animation.webflow.io

• Acho que essa moda do scroll fade nasceu de um mal-entendido causado por bug
  originalmente era uma piscada causada por lazy loading de imagens
  aí os designers acharam que aquilo era um efeito intencional e resolveram “deixar com um fade bonito”

  • Mas, na prática, isso é só excesso de design para parecer “descolado”
    há uma tendência de se fixar mais na rolagem em si do que no conteúdo
  • Ainda assim, isso parece uma tendência separada, e não apenas um bug

• Vou além: parallax scrolling também precisa desaparecer
  eu queria que toda animação ligada à rolagem sumisse

  • Rolar a página já deveria ser apenas o ato simples de mover uma janela de tamanho fixo para cima e para baixo
  • Claro, um parallax sutil em imagens pode funcionar
    mas qualquer elemento se movendo em velocidades diferentes de forma arbitrária é péssimo
  • Não sou contra animação em si, mas, quando é usada sem propósito, fica como comida afogada em ketchup
  • Odeio especialmente quando substituem o comportamento padrão do evento de rolagem
    isso estraga a rolagem suave do Vimium

• Esta página realmente é o ápice de algo que provoca enjoo
  sofro com cinetose forte desde criança, e até hoje ônibus e elevadores são um tormento
  bastaram alguns segundos olhando para essa página para eu sentir que ia vomitar, então mudei imediatamente para o modo leitor
  mesmo assim, fico feliz que a conscientização sobre esse problema esteja aumentando

  • Eu tenho exatamente o mesmo problema com enjoo de movimento
    se eu não estiver no banco do motorista, é sofrido, e as outras pessoas não entendem isso
    especialmente aquele hábito de dirigir acelerando e desacelerando o tempo todo, que parece tortura
  • Ainda bem que não sou só eu
    bastaram alguns minutos para eu sentir que uma enxaqueca estava chegando
  • Eu nem tenho cinetose, mas essa página me causou náusea
    foi uma experiência realmente horrível

• No passado trabalhei com um cliente que adorava scrolljacking
  quando ele descobriu o efeito de parallax, ficou completamente obcecado e acabou me demitindo
  hoje, aquele site engasga em qualquer aparelho que não seja um iPhone 16+

• Um último detalhe chamou minha atenção — a parte em que, ao selecionar, o texto fica invisível
  na prática, quase não existem sites tão difíceis de ler que ainda se preocupem com esse tipo de detalhe

  • Normalmente eles simplesmente bloqueiam a seleção de texto para proteger o “texto sagrado”

• Quando lido com animações, uso uma regra bem simples

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

  a ideia é reduzir a duração da animação à medida que ela se repete
  no começo ela é impactante, mas vai ficando mais curta, o que dá uma sensação geral mais leve e ágil