Efeito parallax: profundidade em rolagem e motion design

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.

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 e trate o efeito como um aprimoramento. Sem suporte, a página simplesmente não se move, e tudo bem.

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

Outras formas de criar rolagem parallax

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 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 cobre a media query e como testá-la.

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.

As partículas são uma camada intermediária natural: efeitos de partículas 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 explica por quê.

Como criar um hero com parallax, passo a passo

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

   Teste no celular

   Confira se rola de forma fluida em um celular intermediário e se nada pula no Safari do iOS.

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

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