Componente · Fundo fixo
O Fixed prende uma imagem no lugar e deixa o resto do conteúdo passar por cima dela enquanto a pessoa rola. É ótimo para contar uma pequena história em capítulos sobre uma única foto de impacto, sem precisar trocar de imagem a cada parágrafo.
Role pelo quadro escuro abaixo: a foto fica parada, ocupando a tela, enquanto três cartões de texto vão passando por cima dela, um de cada vez.
Ela fica presa enquanto esta história atravessa a fotografia.
A imagem só se solta quando a seção termina.
Uma foto, três ideias, sem trocar de cenário.
A imagem entra dentro de um bloco com data-sw="fixed". O conteúdo que deve "passar por cima" vem logo depois, na mesma seção — o restante do visual (posição dos cartões, altura da seção) é só CSS comum, sem nenhum atributo especial.
<section class="minha-historia">
<div data-sw="fixed">
<img src="foto.webp" alt="Descrição">
</div>
<div class="capitulos">
<article>Primeira ideia</article>
<article>Segunda ideia</article>
</div>
</section>O Fixed não tem atributos de ajuste — ele só liga um comportamento (a imagem gruda no topo da tela). Quem controla por quanto tempo ela fica presa é a altura da seção ao redor: quanto mais alta, mais tempo a imagem fica visível antes de se soltar.