Quatro planos, um scroll.

Cada camada se move na própria velocidade. O olho lê profundidade.

Role para ver os planos se separarem.

A imagem é recortada em camadas.

Fundo, nuvens, montanha, primeiro plano: cada pedaço recortado no mesmo tamanho e proporção, para encaixar sem costura. Nada aqui é uma imagem única se movendo.

  1. 01Céu e horizonteo fundo, o mais amplo e o mais lento0.18×
  2. 02Nuvens baixasseparam o céu da serra0.30×
  3. 03Serraa linha que dá a escala0.42×
  4. 04Primeiro planoo que passa mais perto de quem rola0.82×

Três regras que fazem o efeito funcionar.

Empilhe, não anime

As camadas ficam sobrepostas com position: absolute e z-index. O movimento vem depois, e só no eixo Y.

Uma variável só

O scroll escreve --p de 0 a 1. Cada plano multiplica por sua profundidade, sem listener e sem biblioteca.

Sempre com saída

prefers-reduced-motion fixa os planos e devolve a imagem parada. Conteúdo nunca depende do efeito.

Demonstração de técnica. As três fotografias são do Wikimedia Commons: Blassenstein por Uoaei1, Vallée-brouillard por Thomas Bresson, Dülmen por Dietmar Rabich, todas CC BY-SA. A serra é desenhada em SVG, num site real ela seria a camada recortada.

Voltar ao topo