# Efeito parallax: profundidade em scroll e motion design

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

O parallax usa um truque dos teus próprios olhos: o que está perto move-se mais depressa do que o que está longe. Com leveza, dá profundidade a uma página ou a um loop; em excesso, dá enjoo. Eis como o fazer bem.

## The short version

- Um efeito parallax cria profundidade ao mover camadas a velocidades diferentes, com as camadas mais próximas a moverem-se mais depressa do que as distantes.
- Nos sites, o scroll parallax já pode ser feito em CSS com animações por scroll, sem JavaScript, nos navegadores que as suportam.
- A técnica mais antiga `background-attachment: fixed` é ignorada pelo Safari no iOS, por isso não deve ser usada como base para telemóveis.
- Um movimento de parallax grande ou rápido pode causar desconforto a pessoas com perturbações vestibulares, por isso deve ser desligado quando o visitante prefere movimento reduzido.
- Um parallax subtil, com camadas que se movem só um pouco, dá profundidade sem distrair do conteúdo.

Um **efeito parallax** dá profundidade a um design plano ao mover as suas camadas a velocidades diferentes: o fundo desliza devagar, o meio um pouco mais depressa e o primeiro plano o mais depressa de todos, tal como as colinas distantes parecem arrastar-se pela janela de um comboio enquanto os postes da vedação disparam. Nos sites, costuma acontecer ao fazer scroll. No motion design, acontece ao longo do tempo, num loop ou num 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 avalia a distância em parte pelo movimento relativo. Quando duas camadas se movem à mesma velocidade, leem-se como uma só superfície plana. Quando uma se move mais devagar, lê-se como mais distante. Três camadas costumam bastar para criar uma profundidade convincente.

| Camada | Velocidade relativa ao scroll | O que lá vai |
| --- | --- | --- |
| Fundo | A mais lenta, cerca de 10% a 30% do scroll | Um degradê, céu, textura ou campo de cor suave |
| Meio | Média, cerca de metade | Formas, fotografias, ilustrações |
| Primeiro plano | Velocidade normal de scroll | Títulos, botões, o conteúdo propriamente dito |

Um parallax simples de três camadas. Mantém o conteúdo na camada que faz scroll normalmente, para que a leitura nunca seja afetada.

> **O texto fica quieto** Nunca ponhas texto corrente ou botões numa camada de parallax em movimento. Palavras que deslizam a uma velocidade diferente da página cansam a leitura e são difíceis de clicar.

## Efeito parallax em CSS com animações por scroll

O CSS moderno consegue ligar uma animação à posição do scroll em vez do tempo, com `animation-timeline`. O navegador executa-a fora da thread principal, por isso fica fluida e não precisa de JavaScript. O suporte ainda está a crescer: funciona em navegadores Chromium e no Safari recente, por isso consulta o [suporte nos navegadores na MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline) e trata o efeito como um complemento. Sem suporte, a página simplesmente não se move, o que não faz mal.

```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 move-se um pouco enquanto o hero atravessa a janela. Só corre onde há suporte e onde o visitante não pediu movimento reduzido.

A dimensão do movimento está nos keyframes: 10% para cada lado é suave. Passa dos 20% e o efeito começa a parecer um carrossel. Mover `transform` em vez de `top` ou `background-position` mantém o desenho barato para o navegador. O artigo [desempenho de degradês em CSS](https://gradiently.design/pt-pt/guide/css-gradient-performance) explica porque é que degradês grandes e animados devem mover-se, não redesenhar-se.

## Outras formas de criar scroll parallax

| Método | Como funciona | Cuidado com |
| --- | --- | --- |
| Animações por scroll | `animation-timeline: view()` ou `scroll()` liga keyframes ao scroll | Ainda não está em todos os navegadores; constrói-o como complemento |
| `background-attachment: fixed` | O fundo fica parado enquanto o conteúdo passa por cima | Ignorado pelo Safari no iOS; só uma velocidade fixa |
| Perspetiva 3D em CSS | As camadas recuadas com `translateZ` movem-se mais devagar | Escala difícil e configuração trabalhosa do contentor de scroll |
| JavaScript no scroll | Um script move as camadas à medida que a página desliza | Pode engasgar se correr em cada evento de scroll; usa `requestAnimationFrame` |

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

## Parallax e movimento reduzido

Para pessoas com perturbações vestibulares, um movimento grande desencadeado pelo scroll pode causar tonturas e náuseas. As orientações das WCAG sobre [animação a partir de interações](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) pedem que movimentos assim possam ser desligados. A maneira mais simples de o respeitar é envolver o parallax em `prefers-reduced-motion: no-preference`, como no código acima, para que só corra para visitantes que não pediram menos movimento. O artigo [preferência por movimento reduzido](https://gradiently.design/pt-pt/guide/reduced-motion) cobre a media query e como a testar.

### Evita

- Secções inteiras a deslizar a velocidades diferentes
- Texto ou botões em camadas em movimento
- Movimento que ignora as definições de movimento reduzido
- Sequestro do scroll que muda a velocidade
- Parallax em todas as secções da página

### Faz

- Uma camada de fundo a mover-se um pouco
- Conteúdo no scroll normal
- Movimento só sob `no-preference`
- Scroll nativo, intocado
- Parallax num só sítio: normalmente o hero

## Parallax em motion design e vídeo

O parallax não é só para scroll. Numa publicação em movimento, num loop ou numa sequência de títulos, a mesma regra cria profundidade ao longo do tempo: um fundo que desliza devagar, luz ou partículas que se movem um pouco mais depressa e palavras paradas à frente. Esta última parte importa. Palavras paradas sobre um campo suavemente em movimento leem-se como calmas e seguras, enquanto palavras que também deslizam parecem inquietas.

Um hero de site em formato largo com o texto Feito para durar, de uma marca outdoor, com texto parado sobre um degradê em lento movimento

Um hero de site com profundidade: o campo de fundo move-se devagar por trás de palavras paradas, para que o olhar leia primeiro o título.

As partículas são uma camada intermédia natural: [efeitos de partículas](https://gradiently.design/pt-pt/guide/particles-effect) mostra como pontos pequenos e ténues, a moverem-se um pouco mais depressa do que o fundo, acrescentam um segundo plano de profundidade. Mantém o movimento de cada camada lento e suavizado; [princípios de motion design](https://gradiently.design/pt-pt/guide/motion-design-principles) explica porquê.

## Desenhar um hero com parallax, passo a passo

1. **Desenha-o primeiro parado** O hero tem de parecer acabado sem qualquer movimento, porque é isso que os visitantes com movimento reduzido e os navegadores sem suporte vão ver.
2. **Separa as camadas** Põe o campo de cor de fundo numa camada própria, as formas ou fotografias numa segunda, e o título e o botão na própria página.
3. **Move só a camada de trás** Começa só com o fundo a mover-se 10% para cada lado. Acrescenta uma camada intermédia apenas se a profundidade precisar.
4. **Testa num telemóvel** Confirma que faz scroll com fluidez num telemóvel de gama média e que nada salta no Safari do iOS.
5. **Liga o movimento reduzido e verifica de novo** Nas definições de acessibilidade do sistema, pede movimento reduzido e confirma que a página fica 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 a mover-se menos, leem-se como céu, horizonte e primeiro plano.

Para a camada de fundo em si, um degradê vivo faz mais do que um plano. Um Mark da Gradiently exportado como loop WebM ou MP4 contínuo com o Pro, colocado atrás do teu hero, dá à página uma camada de trás que já se move suavemente e que é só tua depois de reservada. Combina-o com [design de hero sections](https://gradiently.design/pt-pt/guide/hero-section-design) e [fundos de hero para sites](https://gradiently.design/pt-pt/guide/website-hero-background) para os tamanhos.

## FAQ

### O que é um efeito parallax?

Uma forma de criar profundidade ao mover camadas a velocidades diferentes, de modo que as mais próximas se movem mais depressa do que as distantes, como na vida real.

### Posso fazer um efeito parallax só com CSS?

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

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

O Safari no iOS ignora o fundo fixo, por isso o fundo faz scroll normalmente. Usa animações por scroll ou uma técnica baseada em transform.

### O scroll parallax é mau para a acessibilidade?

Um movimento grande desencadeado pelo scroll pode fazer pessoas com perturbações vestibulares sentirem-se mal. Mantém-no subtil e desliga-o quando o visitante prefere movimento reduzido.

### O parallax é mau para o desempenho?

Não, se animares `transform` e deixares o navegador geri-lo com animações por scroll. O que provoca engasgos são scripts que movem elementos em cada evento de scroll.