Hero em camadas (layers) no SWCore — documentação e exemplos

O que é

É o "hero premium". Em vez de uma foto parada com um texto em cima, a abertura é montada em camadas: o fundo fica mais para trás, o assunto (o produto, a pessoa) no meio, e o que está perto da câmera passa mais rápido. É essa diferença de ritmo que o olho entende como profundidade. Você coloca sw-ani="layers" na seção e marca cada filho com sw-layer. Veja uma página inteira feita assim no exemplo Café Serra.

Uma linha do tempo do GSAP presa à rolagem move cada camada conforme a distância dela: o que está longe fica para trás da página, o que está perto cresce em direção à câmera, o texto sobe e some, e a névoa esmaece. No PC as camadas também seguem o mouse de leve. No celular o movimento cai pela metade e o mouse sai. Se a pessoa virar o tablet ou mudar o tamanho da janela, ele se remonta sozinho. Com "reduzir movimento" ligado no sistema, fica tudo parado.

Quando usar

Abertura de site de marca: café, restaurante, cervejaria, hotel, produto físico — onde a foto é a estrela.
Lançamento de produto: o produto recortado no meio, o cenário atrás e um detalhe passando na frente.
Uma vez por página, no topo. É o "momento de impacto"; repetir o mesmo efeito nas outras seções tira a graça.
Para uma imagem só que anda devagar, o certo é o sw-ani="parallax", que é mais simples.

Comece aqui

1

Coloque o SWCore e o pacote de animação (o JS da animação vai antes do swcore.min.js).

<link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.2.0/swcore.min.css">
<link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.2.0/swcore.motion.min.css">

<!-- fim do <body> -->
<script src="https://swcore.sanweb.com.br/dist/2.2.0/swcore.motion.min.js"></script>
<script src="https://swcore.sanweb.com.br/dist/2.2.0/swcore.min.js"></script>

2

Monte a seção com as camadas, de trás para a frente. Assunto e frente precisam ser imagens com fundo transparente (PNG ou WebP) — senão tampam o que está atrás.

<section sw-ani="layers">
  <img sw-layer="bg" src="fundo.webp" alt="">
  <img sw-layer="subject" src="produto-recortado.webp" alt="">
  <div sw-layer="text">
    <h1>Café Serra</h1>
    <p>Da montanha para a sua xícara.</p>
  </div>
  <img sw-layer="front" src="folhas-recortadas.webp" alt="">
  <div sw-layer="air" class="minha-nevoa"></div>
</section>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

1. O hero completo

Role a página devagar sobre a abertura: o fundo fica para trás, a xícara acompanha, o texto sobe e some, e as folhas vêm para a câmera. No PC, mexa o mouse em cima dela.

As 5 camadas
`<section sw-ani="layers"> <img sw-layer="bg" src="../../assets/images/camadas/bg.webp" alt="" width="1920" height="1088"> <img sw-layer="subject" src="../../assets/images/camadas/xicara.webp" alt="" width="772" height="603"> <div sw-layer="text"><h2>Café Serra</h2><p>role a página devagar · no PC, mexa o mouse</p></div> <img sw-layer="front" src="../../assets/images/camadas/folhas.webp" alt="" width="1920" height="850"> <div sw-layer="air"></div> </section>`

2. Mais forte, mais suave

sw-ani-distance muda o quanto as camadas se afastam (padrão 35). sw-ani-mouse muda a força do mouse em pixels (padrão 18) ou desliga com off.

Bem marcado: distance 60 e mouse 36 `<section sw-ani="layers" sw-ani-distance="60" sw-ani-mouse="36">…</section>`

Discreto: distance 15 e sem mouse `<section sw-ani="layers" sw-ani-distance="15" sw-ani-mouse="off">…</section>`

Tabela de opções

Palavra	O que faz	Exemplo
Na seção
`sw-ani="layers"`	Liga o hero em camadas. A seção ganha altura de tela cheia (`100svh`) e esconde o que passa da borda.	`<section sw-ani="layers">`
`sw-ani-distance`	Quanto as camadas se afastam, em % da altura do hero. Padrão 35 (0 a 200).	`sw-ani-distance="50"`
`sw-ani-mouse`	Força do mouse em pixels (padrão 18) ou `off`. Só existe em aparelho com mouse de verdade.	`sw-ani-mouse="off"`
`sw-ani-mobile`	`soft` (padrão): metade do movimento e sem mouse · `off`: parado no celular · `full`: igual ao PC.	`sw-ani-mobile="off"`
`sw-ani-break`	Até que largura conta como celular. Padrão 767.	`sw-ani-break="991"`
`sw-ani-scrub`	Suavidade do acompanhamento da rolagem (segundos). Padrão 0.5.	`sw-ani-scrub="1"`
Em cada camada (filho direto)
`sw-layer="bg"`	Fundo. Fica para trás e dá um zoom lento. Fica embaixo de todas.	`<img sw-layer="bg">`
`sw-layer="subject"`	Assunto: produto, pessoa, prédio. Ritmo médio, cresce um pouco. Pode ter mais de um.	`<img sw-layer="subject">`
`sw-layer="text"`	Texto. Já vem centralizado; sobe e some com a rolagem.	`<div sw-layer="text">`
`sw-layer="front"`	Frente: folhas, galhos, objeto perto da câmera. Cresce em direção a quem vê. Não recebe clique.	`<img sw-layer="front">`
`sw-layer="air"`	Atmosfera: névoa, luz, poeira. Esmaece. Fica em cima de tudo e não recebe clique.	`<div sw-layer="air">`
`sw-depth`	Troca o ritmo de uma camada: `0` bem longe · `0.5` anda com a página · `1` bem perto.	`sw-layer="subject" sw-depth="0.3"`

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

Névoa só com CSS (sem imagem) Referência

<div sw-layer="air" class="nevoa"></div>

/* no CSS da página */
.nevoa { background: linear-gradient(transparent 55%, rgb(255 244 230 / .35)); }

Dois planos de montanha com ritmos diferentes Referência

<section sw-ani="layers">
  <img sw-layer="bg" src="ceu.webp" alt="">
  <img sw-layer="subject" sw-depth="0.25" src="serra-longe.webp" alt="">
  <img sw-layer="subject" sw-depth="0.45" src="serra-perto.webp" alt="">
  <div sw-layer="text"><h1>Pousada da Serra</h1></div>
</section>

Parado no celular (foto pesada ou público com aparelho simples) Referência

<section sw-ani="layers" sw-ani-mobile="off">…</section>

Precisa de quê

swcore.min.css + swcore.motion.min.css, e swcore.motion.min.js antes do swcore.min.js (versão 2.2.0 ou mais nova).
Imagens de assunto e frente com fundo transparente.

Cuidados — erros comuns

"A camada tampa tudo": a imagem não tem fundo transparente. Recorte o fundo antes (WebP ou PNG com transparência).
As camadas precisam ser filhas diretas da seção. Dentro de outra <div> elas não são achadas.
Imagens de camada são decorativas: deixe alt="". O que importa para o Google e para leitor de tela vai no texto (sw-layer="text") com um <h1> de verdade.
O hero ocupa a tela inteira. Se a navbar é fixa por cima, deixe um espaço no texto para ela não cobrir o título.
Peso: 3 ou 4 imagens grandes pesam. Use WebP, e loading="eager" só no fundo (é o primeiro que aparece).

O que ele não faz

Um hero em camadas por página já basta — é o momento de impacto. Nas outras seções, varie o efeito.
A camada da frente cresce ancorada embaixo. Objeto de frente que entra pelo topo da imagem sobe para fora do quadro ao crescer.

Hero em camadas (layers) Animações