Paisagem em Camadas Ultra

Hero 2.5D: a foto separada em camadas com o título entre elas; ao rolar, o céu quase para e o morro com a pessoa corre na frente.

Ver na loja e baixar

Sobre este efeito

Abertura cinematográfica com uma foto só, separada em camadas alinhadas: o fundo inteiro, o meio sem o céu e a frente com o chão e a pessoa, e um título entre o meio e a frente. Ao rolar, cada camada sobe num ritmo (céu 18%, mesas 35%, título 67%, frente 88% da rolagem) e a paisagem se apaga num degradê que emenda na seção seguinte. O título fica dentro da cena, atrás de quem está na frente. Acompanha as três camadas da demo e o passo a passo pra recortar as suas (inclusive com IA de imagem). Profundidade, título e cor da emenda ajustáveis; velocidade por camada no HTML. Sem biblioteca.

Ficha

Categoria: Scroll
Onde combina: topo (hero), transições
Alcance: Página inteira: depende da rolagem ou do cursor da página toda.
Plano: Exclusivo de quem assina o Ultra (R$ 39,90/mês).
Peso: 3,1 KB de código comprimido. Sem biblioteca externa.
No celular: Leve: usa 8% do processador de um celular intermediário enquanto anima.
Na loja desde: 11/09/2026

Como colocar no seu site

Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-paisagem-em-camadas.

Assuntos

parallax
hero
camadas
2.5d
profundidade
scroll
rolagem
foto
titulo
cinematografico
css-puro