Foto pela Janela Ultra

Sobre este efeito

Um cartão que funciona como janela: a foto atrás dele fica quase parada na tela enquanto o cartão passa por cima com a rolagem, então a imagem parece estar longe, atrás da página. A foto ainda desce um pouco durante a passagem e o texto pode ficar em outra profundidade, andando a favor ou ao contrário. Segue a posição da rolagem e volta ao subir. A camada da foto é posicionada pela conta a partir da posição do próprio cartão, então funciona igual no celular; o texto fica legível com véu, cada elemento pode ter a sua profundidade, e a preferência de menos movimento deixa a foto parada cobrindo o cartão. Tamanho do cartão, quanto a foto fica presa, deriva, quanto o texto anda, véu e mistura ajustáveis. CSS + JS pequeno, 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,8 KB de código comprimido. Sem biblioteca externa.

No celular

Leve: usa 10% do processador de um celular intermediário enquanto anima.

Na loja desde

15/09/2026

Como colocar no seu site

1. 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.
2. Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
3. Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-foto-pela-janela.

Assuntos

• scroll
• parallax
• imagem
• hero
• cartao
• profundidade