Componente · Profundidade

Parallax

Na vida real, quando você anda de carro, os postes perto da janela passam voando e as montanhas no horizonte quase não se mexem. O Parallax imita essa sensação de profundidade na tela: uma camada (geralmente uma imagem de fundo) se move numa velocidade diferente do restante do conteúdo enquanto a pessoa rola a página.

Como pensar nisso

Role devagar pelo quadro colorido abaixo: o número gigante ao fundo se desloca num ritmo, enquanto a legenda no centro fica praticamente parada. Essa diferença de velocidade é o efeito inteiro.

SW
Fundo mais lento,
texto quase parado

O código

Só o elemento que recebe data-sw="parallax" se move — normalmente uma imagem de fundo. O que estiver por cima dele no HTML fica no fluxo normal da página.

HTML
<div style="position:relative;overflow:hidden">
  <img data-sw="parallax" data-sw-from="-10%" data-sw-y="10%"
       src="paisagem.webp" alt="Descrição da imagem">
  <h2>Seu texto por cima</h2>
</div>
i

O elemento com data-sw="parallax" precisa de um "pai" com overflow:hidden (ou parecido) para que a parte da imagem que "sobra" durante o movimento fique escondida, em vez de vazar pra fora da moldura.

Ajustes

data-sw-fromDe onde a camada começa, verticalmente, antes da rolagem chegar nela.Padrão: -10% · exemplo: data-sw-from="-20%"
data-sw-yAté onde a camada termina de se mover, verticalmente, depois que a rolagem passa por ela.Padrão: 10%
data-sw-scrubO quanto o movimento "atrasa" atrás do dedo ou mouse, criando uma sensação mais fluida. Sempre ligado nesse componente — não precisa declarar.Padrão: 0.6
♿

Com movimento reduzido ativado, a camada simplesmente fica parada — sem nenhum deslocamento.