Efeito parallax só com CSS: perspective e scroll-driven animations
Crie parallax com perspective e translateZ do CSS, ou com scroll-driven animations, veja a matemática da profundidade ao vivo e trate corretamente celulares e o movimento reduzido.
O parallax só com CSS tem dois métodos confiáveis. O método de perspective cria um contêiner de rolagem com perspective e empurra as camadas de fundo para trás com translateZ, depois as aumenta em (perspective menos z) dividido por perspective. O método mais novo liga uma animação de translate a animation-timeline: view(). Os dois devem ser desligados com prefers-reduced-motion.
Três formas de obter um efeito parallax
Método
Como se move
Cuidado com
perspective + translateZ
Camadas mais profundas rolam mais devagar dentro de um contêiner de rolagem 3D
Precisa de um contêiner de rolagem próprio, não da página
animation-timeline: view()
Um translate em keyframes acompanha o elemento pela viewport
Chrome e Edge 115+, Safari 26+, Firefox 161+
background-attachment: fixed
O fundo fica parado enquanto o conteúdo passa por cima
Suporte parcial no Safari do iOS; trava em muitos celulares
Alternativa em JavaScript
A posição de rolagem define um transform a cada frame
Use requestAnimationFrame e um listener passivo
A maioria dos tutoriais de parallax para em background-attachment: fixed, que os iPhones só suportam em parte. Este guia mostra os dois métodos que realmente animam camadas, explica a matemática da escala para suas camadas não encolherem e traz um pequeno script alternativo, além do tratamento de movimento reduzido que evita que o efeito deixe alguém enjoado.
Mova o controle de profundidade no playground para empurrar a camada de fundo mais para trás.
Role a pré-visualização e compare a velocidade da camada de trás com a do texto da frente.
Leia a escala e a velocidade calculadas, que são as que o CSS abaixo usa.
Copie o método que se encaixa: perspective para um hero contido, view() para seções em uma página normal.
Uma camada em translateZ(z) sob perspective p se move a p dividido por (p menos z) da velocidade de rolagem.
Defina overflow-x: hidden no contêiner do parallax, já que as camadas escaladas ficam mais largas que a caixa.
Declare animation-timeline depois do atalho animation, porque o atalho o redefine como auto.
Envolva o movimento em @media (prefers-reduced-motion: no-preference) para que o efeito seja opcional por padrão.
Perguntas frequentes
Por que minha camada com translateZ parece menor?
Afastar um elemento de quem olha com um translateZ negativo o encolhe, exatamente como um objeto distante. Adicione scale((p - z) / p) para restaurar o tamanho. Com perspective: 1px e translateZ(-2px), isso dá scale(3).
O background-attachment: fixed funciona no celular?
Não de forma confiável. O caniuse lista apenas suporte parcial no Safari do iOS e observa que a maioria dos dispositivos móveis demora para atualizar um fundo fixo depois da rolagem. Trate-o como um detalhe só para desktop e use um dos métodos com transform quando o efeito importar.
O parallax é ruim para a acessibilidade?
Movimentos grandes ligados à rolagem podem causar tontura ou náusea em pessoas com distúrbios vestibulares. Respeite a configuração de reduzir movimento do sistema operacional com a media query prefers-reduced-motion e mostre as camadas paradas quando ela estiver ativa.
Quais navegadores suportam parallax com scroll-driven animations?
Em outubro de 2026, o caniuse lista animation-timeline no Chrome e no Edge a partir da 115, no Safari a partir da 26 e no Firefox a partir da 161. Navegadores mais antigos simplesmente pulam a animação, então a página continua legível sem o efeito.
Como funciona o método de perspective
O contêiner vira o elemento que rola e recebe um valor de perspective. Os filhos mantêm a posição 3D com transform-style: preserve-3d. Quando o contêiner rola, uma camada mais ao fundo no eixo z percorre menos distância na tela do que uma com z igual a zero, então parece ficar para trás.
Como a perspective em um elemento também cria um contexto de empilhamento e um bloco de contenção para filhos fixos, mantenha o wrapper do parallax independente. Cabeçalhos que precisam ficar fixos na janela devem ficar fora dele.
Celulares e navegadores antigos
O próprio texto do Chrome sobre parallax com bom desempenho observa que a rolagem com inércia no iOS achatava o contexto 3D, o que acabava com o truque de perspective nos iPhones. Teste em um aparelho real e mantenha o conteúdo legível quando as camadas não se moverem.
O método com scroll-driven animations não tem esse problema, porque roda na rolagem normal da página. Onde não há suporte, os keyframes nunca rodam e a camada fica na posição de repouso, o que é uma alternativa limpa.
Método 1: perspective e translateZ
Hero de duas camadas com rolagem própria
Role dentro do quadro. A camada listrada está em translateZ(-2px) e escalada por 3, então se move a um terço da velocidade de rolagem.
Método 2: scroll-driven com view()
Imagem que desliza enquanto a seção atravessa a tela
A animação só roda onde animation-timeline é suportado e o leitor não pediu movimento reduzido.
Alternativa em JavaScript
Parallax pequeno com requestAnimationFrame
Usado só quando as scroll-driven animations não estão disponíveis. O listener é passivo e o trabalho acontece uma vez por frame.
Playground de profundidade
Profundidade da camada de trás (translateZ): {n}px
Escala necessária: {v}
Velocidade da camada de trás: {v} da rolagem
Pré-visualização do parallax, role dentro dela
O texto da frente se move na velocidade total
Continue rolando para ver a camada de trás ficar para trás.
Seu dispositivo pede movimento reduzido, então a pré-visualização fica parada.