SWCore / Animações / Frames

Frames Animações

Sequência de imagens (ou um sprite sheet) trocada quadro a quadro conforme o scroll — efeito de "vídeo" controlado pela rolagem.

O que é

Simula um vídeo tocando conforme o visitante rola — usado em produtos que giram 360°, demonstrações passo a passo, ou qualquer sequência de imagens que deveria "avançar" com o scroll em vez de tempo real.

Como funciona

Aceita dois formatos: uma lista de <img data-sw-frame> (uma tag por quadro) ou um único sprite sheet (data-sw-frame-sprite="colunasxlinhas") onde os quadros são recortados via background-position. O progresso do scroll escolhe qual quadro mostrar, arredondando pro mais próximo.

Exemplos

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

Quadro 1 de 40 Quadro 2 de 40 Quadro 3 de 40 Quadro 4 de 40 Quadro 5 de 40 Quadro 6 de 40 Quadro 7 de 40 Quadro 8 de 40 Quadro 9 de 40 Quadro 10 de 40 Quadro 11 de 40 Quadro 12 de 40 Quadro 13 de 40 Quadro 14 de 40 Quadro 15 de 40 Quadro 16 de 40 Quadro 17 de 40 Quadro 18 de 40 Quadro 19 de 40 Quadro 20 de 40 Quadro 21 de 40 Quadro 22 de 40 Quadro 23 de 40 Quadro 24 de 40 Quadro 25 de 40 Quadro 26 de 40 Quadro 27 de 40 Quadro 28 de 40 Quadro 29 de 40 Quadro 30 de 40 Quadro 31 de 40 Quadro 32 de 40 Quadro 33 de 40 Quadro 34 de 40 Quadro 35 de 40 Quadro 36 de 40 Quadro 37 de 40 Quadro 38 de 40 Quadro 39 de 40 Quadro 40 de 40 
<section data-sw="frames">
  <div data-sw-frame-stage>
    <img data-sw-frame src="quadro-01.webp" alt="Descrição">
    <img data-sw-frame src="quadro-02.webp" alt="Descrição">
    <!-- pelo menos 2 data-sw-frame; quanto mais quadros reais (não pulados), mais parece filme -->
  </div>
</section>

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

<section data-sw="frames" data-sw-frame-sprite="8x5" data-sw-frame-count="40">
  <div data-sw-frame-stage style="background-image:url('sprite.webp')"></div>
</section>
<!-- o recorte de cada quadro (background-size/position) é calculado sozinho a partir de "8x5" -->

Atributos

data-sw="frames"
no container
data-sw-frame-stage
no elemento filho que serve de palco (obrigatório)
data-sw-frame (nos filhos, modo lista)
marca cada imagem como um quadro — precisa de pelo menos 2
data-sw-frame-sprite
formato "colunasxlinhas" (ex. "6x4") — usa um sprite sheet em vez de imagens separadas
data-sw-frame-count
total de quadros úteis do sprite, se for menor que colunas×linhas
data-sw-end
distância de scroll (padrão: baseado no total de quadros)

Variantes

Nenhum.

Eventos

sw:frame
disparado a cada troca de quadro, com detail.index e detail.total

API (JavaScript)

Nenhum.

Requisitos

  • Precisa do gsap-bundle.js (GSAP com ScrollTrigger já incluso). O JS e o CSS do Motion já vêm dentro de swcore.js/swcore.css, sem arquivo extra do SWCore. Precisa de pelo menos 2 quadros (lista) ou de um sprite sheet válido.

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

  • Sem pré-carregamento automático das imagens — sequências grandes (dezenas de quadros) podem "engasgar" na primeira passada se as imagens forem pesadas; otimizar o peso de cada quadro é responsabilidade de quem usa.
← AnteriorTrack Próximo →Sections