Parallax Animações

O que é

Efeito clássico de profundidade: uma imagem de fundo, uma forma decorativa ou um elemento de destaque se desloca mais devagar (ou mais rápido) que o conteúdo ao redor conforme a página rola.

Como funciona

O elemento é preso ao progresso de scroll do próprio elemento pai (do topo até a base da tela até o topo até a base) via scrub — o deslocamento acompanha a posição do scroll em tempo real, sem depender de requestAnimationFrame manual. Por padrão só o eixo vertical anima; o eixo horizontal (data-sw-from-x/data-sw-x) só entra em jogo se um dos dois estiver presente no elemento.

Exemplos

01 · Movimento suave — a imagem respira dentro da moldura Ao vivo

-8%+8%

01

Movimento suave

A imagem respira dentro da moldura.

De -8% até 8%. Observe as linhas do prédio se deslocando enquanto a moldura segue a página.

<img data-sw="parallax" data-sw-from="-8%" data-sw-y="8%" data-sw-scrub=".7" src="imagem.webp" alt="Descrição">

02 · Parallax forte — mais distância, mais profundidade Ao vivo

-16%+16%

02

Forte

Mais distância, mais sensação de profundidade.

<img data-sw="parallax" data-sw-from="-16%" data-sw-y="16%" data-sw-scrub="1" src="imagem.webp" alt="Descrição">

03 · Efeito fixed — a imagem não se mexe enquanto 3 blocos de texto passam por cima dela Ao vivo

IMAGEM FIXA

03.1

Efeito fixed

A imagem não se mexe.

Ela permanece ocupando a tela enquanto esta história atravessa a fotografia.

03.2

A janela se move

Quem passa é o conteúdo.

A imagem só será liberada quando a seção terminar.

03.3

Uso ideal

Impacto com simplicidade.

Ótimo para manifestos, produtos, etapas e mudanças de mensagem.

<div data-sw="fixed">
  <img src="imagem.webp" alt="Descrição">
<!-- blocos de texto ficam aqui... -->
</div>
<!-- os blocos de texto por cima (03.1/03.2/03.3) são só CSS próprio, não fazem parte do atributo -->

04 · Efeito janela — o quadrado anda, a imagem não Ao vivo

MOVE

Observe: as duas janelas mostram a mesma fotografia alinhada no mesmo ponto da tela. Elas se movimentam; a paisagem permanece imóvel atrás delas.

<figure data-sw="window">
  <img src="imagem.webp" alt="Descrição">
</figure>
<!-- repita a mesma figura com a mesma imagem pra comparar duas janelas lado a lado -->

05 · Camadas opostas — a imagem sobe, a palavra desce Ao vivo

DEPTH

05

Camadas opostas

A imagem sobe. A palavra desce.

Quando duas camadas percorrem distâncias diferentes, o cérebro percebe espaço entre elas.

<img data-sw="parallax" data-sw-from="-14%" data-sw-y="14%" data-sw-scrub=".8" src="imagem.webp" alt="Descrição">
<strong data-sw="parallax" data-sw-from="24%" data-sw-y="-24%" data-sw-scrub=".8">DEPTH</strong>

06 · Comparação — duas direções, uma única rolagem Ao vivo

Sobe no conteúdo

↓ direção invertida

06

Comparação

Duas direções. Uma única rolagem.

<img data-sw="parallax" data-sw-from="-12%" data-sw-y="12%" data-sw-scrub=".8" src="foto-a.webp" alt="Descrição">
<img data-sw="parallax" data-sw-from="12%" data-sw-y="-12%" data-sw-scrub=".8" src="foto-b.webp" alt="Descrição">

Atributos

Variantes

Nenhum.

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

• Mesmo requisito das demais páginas desta área: gsap-bundle.js (GSAP com ScrollTrigger já incluso). O JS e o CSS do Motion já vêm dentro de swcore.js/swcore.css, sem arquivo extra do SWCore.

Limitações — o que ele não faz

Nenhuma.