SWCore / Animações / Fixed

Fixed Animações

Cria camadas fixas (backgrounds, palcos e janelas) que ficam presas na tela enquanto conteúdos longos, capítulos ou efeitos passam por cima.

O que é

O efeito Fixed é a técnica clássica de narrativa editorial em scroll: a imagem, vídeo ou palco de fundo fica fixo (grudado no topo da tela) enquanto textos, cards, capítulos ou seções inteiras deslizam por cima. Ao terminar o conteúdo, a rolagem é liberada naturalmente para o resto da página.

Como funciona

Existem dois métodos canônicos para usar o efeito Fixed no ecossistema do SWCore:

1. No fluxo normal da página (CSS Sticky Nativo + data-sw="fixed"):
Cria-se um container pai com altura multiplicada (ex.: height: 300vh ou calc(3 * 100vh)). O fundo ganha position: sticky; top: 0; height: 100vh; (marcado com data-sw="fixed") e os blocos de texto/cards sobem por cima no fluxo natural. Quando o visitante chega ao fim da altura do container, a imagem sai junto e a página continua normalmente.

2. Dentro de seções em tela cheia (data-sw="sections" com data-sw-scroll):
Dentro de uma [data-sw-section] com fundo absoluto (position: absolute; inset: 0), adiciona-se <div data-sw-scroll data-sw-h="300%">. A timeline do GSAP prende a tela e rola todo o conteúdo longo de baixo para cima com o mouse. Ao chegar no final do conteúdo, a timeline avança automaticamente para a próxima section!

Exemplos

01 · Fixed Editorial Clássico (3 Capítulos passando sobre a imagem fixa) Ao vivo

IMAGEM FIXA

Efeito fixed

A imagem não se mexe.

Ela permanece ocupando o quadro enquanto esta história atravessa a fotografia.

A janela se move

Quem passa é o conteúdo.

A imagem só será liberada quando esta história terminar.

Uso ideal

Impacto com simplicidade.

Ótimo pra manifestos, produtos, etapas e mudanças de mensagem.

<!-- 1. Container pai com altura multiplicada (3 telas = 300vh) -->
<div class="demo-fixed-story" style="position:relative; height:calc(3 * 100vh);">
  
  <!-- 2. Imagem de fundo que gruda no topo com position:sticky -->
  <div data-sw="fixed" class="demo-fixed-bg" style="position:sticky; top:0; height:100vh; width:100%; z-index:0;">
    <img src="foto.webp" alt="Fundo Fixo" style="width:100%; height:100%; object-fit:cover;">
    <span class="demo-fixed-watermark">IMAGEM FIXA</span>
  </div>

  <!-- 3. Painéis de conteúdo que sobem por cima da imagem -->
  <div class="demo-fixed-panels" style="position:absolute; inset:0; z-index:1;">
    <div class="demo-fixed-panel">
      <span class="demo-parallax-num">01</span>
      <h4 class="demo-parallax-heading">A imagem não se mexe.</h4>
      <p class="demo-parallax-desc">Ela permanece ocupando o quadro enquanto esta história atravessa a fotografia.</p>
    </div>
    <div class="demo-fixed-panel" style="justify-self:end;">
      <span class="demo-parallax-num">02</span>
      <h4 class="demo-parallax-heading">Quem passa é o conteúdo.</h4>
      <p class="demo-parallax-desc">A imagem só será liberada quando esta história inteira terminar.</p>
    </div>
    <div class="demo-fixed-panel">
      <span class="demo-parallax-num">03</span>
      <h4 class="demo-parallax-heading">Impacto com simplicidade.</h4>
      <p class="demo-parallax-desc">Ótimo para manifestos, produtos, etapas e mudanças de mensagem.</p>
    </div>
  </div>
</div>

02 · Passando um Conteúdo Longo / Grande Texto sobre Imagem Fixa (Fluxo Normal) Ao vivo

Parte I

Abertura do manifesto

O visitante começa a ler este bloco enquanto a imagem de fundo permanece imóvel atrás da tela com nitidez total.

À medida que o scroll avança, novos parágrafos entram sem que a imagem saia do lugar.

Parte II

O conteúdo denso atravessa a tela

Você pode colocar tabelas, depoimentos, cards, listas de recursos ou artigos inteiros dentro deste bloco deslizante.

A experiência é 100% responsiva: o texto sobe suavemente pelo scroll do mouse.

Parte III

Conclusão e liberação do scroll

Quando o último card passar, o container atinge o fim da sua altura e o restante da página volta a rolar normalmente.

<!-- Container com altura estendida proporcional ao tamanho do texto -->
<div class="demo-fixed-long-story" style="position:relative; height:calc(2.8 * 100vh);">
  
  <!-- Imagem fixa no fundo com overlay escurecido -->
  <div data-sw="fixed" class="demo-fixed-long-bg" style="position:sticky; top:0; height:100vh; width:100%;">
    <img src="paisagem.webp" alt="Fundo">
  </div>

  <!-- Fluxo de texto longo que sobe pelo scroll normal -->
  <div class="demo-fixed-long-content" style="position:relative; z-index:1; margin-top:-100vh;">
    <div class="demo-fixed-card-flow">
      <span class="demo-parallax-num">Parte I</span>
      <h3 style="color:#fff; font-size:1.8rem; font-weight:800; margin:.4rem 0 .8rem;">Abertura do manifesto</h3>
      <p style="color:#cbd5e1; line-height:1.8; margin-bottom:1rem;">O visitante começa a ler este bloco enquanto a imagem de fundo permanece imóvel atrás da tela com nitidez total.</p>
      <p style="color:#94a3b8; line-height:1.7;">À medida que o scroll avança, novos parágrafos entram sem que a imagem saia do lugar.</p>
    </div>

    <div class="demo-fixed-card-flow">
      <span class="demo-parallax-num">Parte II</span>
      <h3 style="color:#fff; font-size:1.8rem; font-weight:800; margin:.4rem 0 .8rem;">O conteúdo denso atravessa a tela</h3>
      <p style="color:#cbd5e1; line-height:1.8; margin-bottom:1rem;">Você pode colocar tabelas, depoimentos, cards, listas de recursos ou artigos inteiros dentro deste bloco deslizante.</p>
      <p style="color:#94a3b8; line-height:1.7;">A experiência é 100% responsiva e acessível: em telas mobile, o texto flui naturalmente sem quebrar o layout.</p>
    </div>

    <div class="demo-fixed-card-flow">
      <span class="demo-parallax-num">Parte III</span>
      <h3 style="color:#fff; font-size:1.8rem; font-weight:800; margin:.4rem 0 .8rem;">Conclusão e liberação do scroll</h3>
      <p style="color:#cbd5e1; line-height:1.8;">Quando o último card passar, o container atinge o fim da sua altura e o restante da página volta a rolar normalmente.</p>
    </div>
  </div>
</div>

Essa seção prende a tela de verdade e se solta da moldura enquanto você rola — role bem devagar pra ver o efeito.

Abertura

Section 1: Começo da Jornada

Esta é a primeira tela da apresentação. Ao rolar, a Section 2 vai cobri-la.

Passo A

Fundo Fixo na Section 2

A tela fica travada na Section 2 enquanto você rola este conteúdo longo pelo scroll do mouse.

Passo B

Todo o conteúdo passa

O fundo de poltrona âmbar permanece parado enquanto estes blocos deslizam suavemente.

Passo C

Pronto para avançar

Ao terminar de passar por aqui, a Section 3 entrará cobrindo esta tela!

Conclusão

Section 3: A Jornada Continua

A Section 3 entrou com sucesso após todo o conteúdo da Section 2 ter sido percorrido.

<!-- Estrutura para usar Fixed com Conteúdo Grande dentro de data-sw="sections" -->
<div data-sw="sections" data-sw-fx="cover">
  
  <!-- Section 1 Normal -->
  <section data-sw-section class="h-screen bg-slate-900 flex items-center justify-center">
    <h2>Section 1: Abertura</h2>
  </section>

  <!-- Section 2: Fundo Fixo + Conteúdo Grande com data-sw-scroll -->
  <section data-sw-section data-sw-h="250%" class="relative h-screen overflow-hidden">
    <!-- Fundo fixo da seção -->
    <div class="absolute inset-0 z-0">
      <img src="fundo.webp" class="w-full h-full object-cover" alt="Fundo">
    </div>

    <!-- Conteúdo longo que rola por cima até o fim antes de trocar de section -->
    <div data-sw-scroll class="relative z-10 p-8 max-w-xl mx-auto space-y-16 text-white">
      <div class="p-6 rounded-lg bg-black/60 backdrop-blur">
        <h3>Passo A: O conteúdo começa</h3>
        <p>A tela fica presa na Section 2 enquanto você rola todo este conteúdo.</p>
      </div>
      <div class="p-6 rounded-lg bg-black/60 backdrop-blur">
        <h3>Passo B: O conteúdo avança</h3>
        <p>A imagem de fundo não se mexe, apenas este texto sobe.</p>
      </div>
      <div class="p-6 rounded-lg bg-black/60 backdrop-blur">
        <h3>Passo C: Fim do conteúdo longo</h3>
        <p>Ao terminar de passar por aqui, a timeline avança para a Section 3!</p>
      </div>
    </div>
  </section>

  <!-- Section 3 Normal: Continuação da página -->
  <section data-sw-section class="h-screen bg-slate-800 flex items-center justify-center">
    <h2>Section 3: Próxima Tela da Apresentação</h2>
  </section>

</div>

04 · Camada de base para empilhar Parallax por cima (Uso Mínimo) Ao vivo

<div class="demo-media demo-media--tall">
  <!-- Camada de referência fixa com gradiente ou imagem -->
  <div data-sw="fixed" class="demo-gradient-fill"></div>
</div>

Atributos

data-sw="fixed"

marca o elemento de fundo como referência fixa da composição no fluxo normal

data-sw-scroll

usado DENTRO de data-sw="sections" em uma section longa — faz o conteúdo rolar sobre o fundo antes de liberar a próxima tela

data-sw-h

altura de rolagem proporcional do data-sw-scroll (ex: "250%", "300%", "400%" ou "1200px")

data-sw-scrub

suavização da transição no scroll (número em segundos ou presente para 1:1)

Variantes

Nenhum.

Eventos

sw:progress

disparado quando usado em conjunto com timelines do Motion (de 0 a 1)

API (JavaScript)

Nenhum.

Requisitos

Precisa do gsap-bundle.js (GSAP com ScrollTrigger já incluso) quando utilizado em conjunto com timelines de animação ou data-sw="sections".
O JS e o CSS do Motion já vêm integrados dentro de swcore.js e swcore.css.

Limitações — o que ele não faz

No método de fluxo normal (CSS Sticky), o container pai deve ter altura explícita (ex: height: calc(3 * 100vh) ou height: 300vh) e nenhum ancestral direto pode ter overflow: hidden ou overflow: clip, senão o position: sticky nativo é anulado pelo navegador.
Dentro de data-sw="sections", não coloque data-sw="fixed" ou position: sticky bruto. Use sempre data-sw-scroll com data-sw-h="300%" na section filha — assim a timeline do GSAP coordena a passagem do texto sem quebrar o contexto de empilhamento absoluto.
Em dispositivos móveis com telas pequenas, seções muito longas podem cansar o usuário se não houver indicação visual de que a tela voltará a se mover — use um indicador sutil de progresso ou limite a altura para 200vh a 250vh.

← AnteriorParallax Próximo →Window