Efeito parallax: profundidade em scroll e motion design

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.

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 e trata o efeito como um complemento. Sem suporte, a página simplesmente não se move, o que não faz mal.

.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 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 explica porque é que degradês grandes e animados devem mover-se, não redesenhar-se.

Outras formas de criar scroll parallax

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 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 cobre a media query e como a testar.

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.

As partículas são uma camada intermédia natural: efeitos de partículas 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 explica porquê.

Desenhar um hero com parallax, passo a passo

1. 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. 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. 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. 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. 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.

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 e fundos de hero para sites para os tamanhos.