# Efeito parallax: profundidade em rolagem e motion design

[Canonical HTML page](https://gradiently.design/pt-br/guide/parallax-effect)

O parallax pega emprestado um truque dos seus próprios olhos: o que está perto se move mais rápido do que o que está longe. Em dose leve, dá profundidade a uma página ou a um loop; em excesso, dá enjoo. Veja como fazer bem.

## The short version

- O efeito parallax cria profundidade movendo camadas em velocidades diferentes, com as camadas mais próximas se movendo mais rápido que as distantes.
- Em sites, a rolagem parallax já pode ser feita em CSS com animações guiadas por rolagem, sem JavaScript, nos navegadores que as suportam.
- A técnica mais antiga `background-attachment: fixed` é ignorada pelo Safari do iOS, então não deve ser usada como base no celular.
- Movimentos grandes ou rápidos de parallax podem causar desconforto em pessoas com distúrbios vestibulares, por isso devem ser desativados quando o visitante prefere movimento reduzido.
- Um parallax sutil, com camadas se movendo só um pouco, dá profundidade sem distrair do conteúdo.

O **efeito parallax** faz um design plano parecer profundo movendo suas camadas em velocidades diferentes: o fundo se arrasta devagar, o meio um pouco mais rápido e o primeiro plano mais rápido ainda, como as colinas distantes que parecem rastejar pela janela do trem enquanto os postes da cerca passam voando. Em sites, isso costuma acontecer enquanto você rola a página. No motion design, acontece ao longo do tempo, em um loop ou em um vídeo. Seja como for, o melhor parallax é pequeno, lento e desligado para quem pediu ao dispositivo menos movimento.

## Como o parallax cria profundidade

O cérebro julga a distância em parte pelo movimento relativo. Quando duas camadas se movem na mesma velocidade, são lidas como uma superfície plana. Quando uma se move mais devagar, parece mais distante. Três camadas costumam bastar para criar uma profundidade convincente.

| Camada | Velocidade em relação à rolagem | O que vai nela |
| --- | --- | --- |
| Fundo | A mais lenta, cerca de 10% a 30% da rolagem | Um degradê, céu, textura ou campo de cor suave |
| Meio | Média, cerca da metade | Formas, fotos, ilustrações |
| Primeiro plano | Velocidade normal de rolagem | Títulos, botões, o conteúdo em si |

Um parallax simples de três camadas. Mantenha o conteúdo na camada que rola normalmente, para que a leitura nunca seja afetada.

> **O texto fica parado** Nunca ponha texto corrido nem botões em uma camada parallax em movimento. Palavras que deslizam em velocidade diferente da página cansam na leitura e são difíceis de clicar.

## Efeito parallax em CSS com animações guiadas por rolagem

O CSS moderno consegue ligar uma animação à posição de rolagem em vez de ao tempo, usando `animation-timeline`. O navegador a executa fora da thread principal, então ela fica fluida, e não é preciso JavaScript. O suporte ainda está crescendo: funciona em navegadores Chromium e no Safari recente, então confira o [suporte de navegadores no MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline) e trate o efeito como um aprimoramento. Sem suporte, a página simplesmente não se move, e tudo bem.

```css
.hero {
  position: relative;
  overflow: clip;
  isolation: isolate;          /* keeps the layer inside the hero */
  min-height: 80vh;
  view-timeline: --hero block;
}

.hero__bg {
  position: absolute;
  inset: -15% 0;               /* extra room so edges never show */
  background:
    radial-gradient(circle at 75% 20%, #7c3aed 0%, transparent 45%),
    linear-gradient(170deg, #0f0b1e 0%, #1e1b4b 100%);
  z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero__bg {
      animation: hero-depth linear both;
      animation-timeline: --hero;
    }
  }
}

@keyframes hero-depth {
  from { transform: translateY(-10%); }
  to   { transform: translateY(10%); }
}
```

A camada de fundo se move um pouco enquanto o hero atravessa a janela de visualização. Ela só roda onde há suporte e onde o visitante não pediu movimento reduzido.

A intensidade do movimento mora nos keyframes: 10% para cada lado é suave. Passe de 20% e o efeito começa a parecer um brinquedo de parque. Mover `transform` em vez de `top` ou `background-position` mantém o desenho barato para o navegador. [Desempenho de degradês CSS](https://gradiently.design/pt-br/guide/css-gradient-performance) explica por que degradês grandes e animados devem se mover, e não ser repintados.

## Outras formas de criar rolagem parallax

| Método | Como funciona | Atenção a |
| --- | --- | --- |
| Animações guiadas por rolagem | `animation-timeline: view()` ou `scroll()` liga os keyframes à rolagem | Ainda não está em todos os navegadores; crie como aprimoramento |
| `background-attachment: fixed` | O fundo fica parado enquanto o conteúdo rola por cima | Ignorado pelo Safari do iOS; só uma velocidade fixa |
| Perspectiva 3D em CSS | Camadas empurradas para trás com `translateZ` rolam mais devagar | Escala e configuração do contêiner de rolagem trabalhosas |
| JavaScript na rolagem | Um script move as camadas conforme a página rola | Pode travar se rodar a cada evento de rolagem; use `requestAnimationFrame` |

Quatro técnicas. Para um site novo, as animações guiadas por rolagem são a escolha mais limpa.

## Parallax e movimento reduzido

Para pessoas com distúrbios vestibulares, um movimento grande disparado pela rolagem pode causar tontura e náusea. A orientação da WCAG sobre [animação a partir de interações](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) pede que esse tipo de movimento possa ser desativado. A forma mais simples de respeitar isso é envolver o parallax em `prefers-reduced-motion: no-preference`, como no código acima, para que ele só rode para quem não pediu menos movimento. [Prefers reduced motion](https://gradiently.design/pt-br/guide/reduced-motion) cobre a media query e como testá-la.

### Evite

- Seções inteiras deslizando em velocidades diferentes
- Texto ou botões em camadas em movimento
- Movimento que ignora os ajustes de movimento reduzido
- Sequestro de rolagem que muda a velocidade dela
- Parallax em todas as seções da página

### Faça

- Uma camada de fundo se movendo um pouco
- Conteúdo na rolagem normal
- Movimento só sob `no-preference`
- Rolagem nativa, intocada
- Parallax em um só lugar: geralmente o hero

## Parallax em motion design e vídeo

O parallax não é só para rolagem. Em um post em movimento, um loop ou uma sequência de títulos, a mesma regra cria profundidade ao longo do tempo: um fundo que se arrasta devagar, luz ou partículas que se movem um pouco mais rápido e palavras paradas na frente. Esta última parte importa. Palavras paradas sobre um campo suavemente em movimento parecem calmas e seguras, enquanto palavras que também se movem parecem inquietas.

Hero widescreen de site com o texto Feito para ir longe, de uma marca outdoor, com tipografia parada sobre um degradê em lento movimento

Um hero de site com profundidade: o campo de fundo se move devagar atrás de palavras paradas, então o olhar lê o título primeiro.

As partículas são uma camada intermediária natural: [efeitos de partículas](https://gradiently.design/pt-br/guide/particles-effect) mostra como pequenos e tênues pontos se movendo um pouco mais rápido que o fundo somam um segundo plano de profundidade. Mantenha o movimento de cada camada lento e suavizado; [princípios de motion design](https://gradiently.design/pt-br/guide/motion-design-principles) explica por quê.

## Como criar um hero com parallax, passo a passo

1. **Desenhe primeiro parado** O hero precisa parecer acabado sem movimento algum, porque é isso que os visitantes com movimento reduzido e os navegadores sem suporte vão ver.
2. **Separe as camadas** Coloque o campo de cor do fundo em uma camada própria, formas ou fotos em uma segunda e o título e o botão na própria página.
3. **Mova só a camada de trás** Comece com apenas o fundo se movendo 10% para cada lado. Some uma camada do meio só se a profundidade pedir.
4. **Teste no celular** Confira se rola de forma fluida em um celular intermediário e se nada pula no Safari do iOS.
5. **Ative o movimento reduzido e confira de novo** Nos ajustes de acessibilidade do sistema, peça movimento reduzido e confirme que a página está calma e completa.

- Camada distante: céu noturno: `linear-gradient(180deg, #0c1445 0%, #1e3a8a 50%, #60a5fa 100%)`
- Camada do meio: brilho do horizonte: `radial-gradient(ellipse at 50% 100%, #f59e0b 0%, #b45309 35%, #1e3a8a 75%)`
- Camada próxima: primeiro plano escuro: `linear-gradient(180deg, #374151 0%, #111827 55%, #0a0a0a 100%)`

Três camadas de degradê para um hero com parallax. Empilhadas, com a camada distante se movendo menos, são lidas como céu, horizonte e primeiro plano.

Para a camada de fundo em si, um degradê vivo faz mais do que um chapado. Um Mark do Gradiently exportado como loop WebM ou MP4 contínuo com o Pro, posto atrás do seu hero, dá à página uma camada de trás que já se move com suavidade e que é só sua depois de reservada. Combine com [design de seção hero](https://gradiently.design/pt-br/guide/hero-section-design) e [fundos para hero de site](https://gradiently.design/pt-br/guide/website-hero-background) para os tamanhos.

## FAQ

### O que é o efeito parallax?

Uma forma de criar profundidade movendo camadas em velocidades diferentes, de modo que as mais próximas se movam mais rápido que as distantes, como na vida real.

### Dá para fazer o efeito parallax só com CSS?

Dá. As animações guiadas por rolagem do CSS ligam keyframes à posição de rolagem sem JavaScript, nos navegadores que suportam `animation-timeline`. Os métodos mais antigos em CSS puro usam `background-attachment: fixed` ou perspectiva 3D.

### Por que o background-attachment: fixed não funciona no iPhone?

O Safari do iOS ignora o attachment fixo do fundo, então o fundo rola normalmente. Use animações guiadas por rolagem ou uma técnica baseada em transform.

### A rolagem parallax prejudica a acessibilidade?

Movimentos grandes disparados pela rolagem podem fazer mal a pessoas com distúrbios vestibulares. Mantenha-o sutil e desative-o quando o visitante preferir movimento reduzido.

### O parallax prejudica o desempenho?

Não, se você animar `transform` e deixar o navegador conduzir com animações guiadas por rolagem. Scripts que movem elementos a cada evento de rolagem é que causam travadas.