SWCore / Animações / Frames (sprite no scroll)

Frames (sprite no scroll) Animações

Troca de QUADRO presa ao scroll — não anima suave, pula de imagem em imagem. "Gira o produto 360°" clássico.

O que é

Em vez de vídeo contínuo, mostra uma sequência de imagens (fotos de um produto girando, por exemplo) e troca de quadro conforme a posição do scroll.

Como funciona

Aceita duas fontes: um sprite-sheet único (grade de quadros num arquivo só) ou várias imagens separadas, uma por quadro.

Exemplos

A ideia — um quadro por posição de scroll Ao vivo

Não é vídeo nem animação suave: ele troca de imagem conforme você rola, como folhear. É o efeito de "girar o produto 360°" das lojas.

Precisa dos arquivos reais (um sprite ou a sequência de fotos), por isso a demonstração aqui seria falsa — o código ao lado é o completo.

<!-- 1) sprite-sheet: uma imagem com a grade de quadros -->
<div sw-ani="frames" sw-ani-frame-sprite="6x4">
  <div sw-ani-frame-stage></div>
</div>

<!-- 6 colunas × 4 linhas = 24 quadros -->
Imagens separadas Ao vivo

Se você tem uma pasta com frame-01.jpg, frame-02.jpg…, não precisa montar sprite: liste as imagens e marque cada uma com sw-ani-frame.

<div sw-ani="frames">
  <div sw-ani-frame-stage>
    <img sw-ani-frame src="frame-01.jpg" alt="">
    <img sw-ani-frame src="frame-02.jpg" alt="">
    <img sw-ani-frame src="frame-03.jpg" alt="">
    <!-- … -->
  </div>
</div>
Usando só parte da grade Ao vivo

Sprite de 6×4 dá 24 quadros. Se a sua sequência tem 20 e as últimas 4 posições estão vazias, o sw-ani-frame-count evita que o produto "suma" no fim da rolagem.

<div sw-ani="frames" sw-ani-frame-sprite="6x4" sw-ani-frame-count="20">
  <div sw-ani-frame-stage></div>
</div>
Cuidados de peso Ao vivo

Todos os quadros precisam estar carregados pra troca ser instantânea — é o preço do efeito. Um giro 360° com 36 fotos grandes pode passar de vários MB.

Na prática: comprima bem, use uma resolução só o suficiente pro tamanho exibido, e prefira 24–36 quadros a 60.

<!-- sprite comprimido costuma ser a opção mais leve:
     1 requisição em vez de 24, e o navegador decodifica uma vez só -->
<div sw-ani="frames" sw-ani-frame-sprite="6x4">
  <div sw-ani-frame-stage></div>
</div>

Atributos

sw-ani-frame-sprite
grade do sprite-sheet — ex.: "6x4" (6 colunas × 4 linhas = 24 quadros)
sw-ani-frame-count
quantos quadros usar, quando não quiser a grade inteira
sw-ani-frame-stage
o palco onde o quadro aparece
sw-ani-frame
cada imagem, quando você usa fotos separadas em vez de sprite

Variantes

sprite-sheet
uma imagem só, com todos os quadros numa grade — menos requisições
imagens separadas
um arquivo por quadro — mais simples de gerar e de trocar

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

  • Precisa do pacote swcore.motion.min.css/js.

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

  • Todos os quadros ficam na página: é o componente mais pesado da família. Meça o total antes de publicar.
  • A troca é seca, de imagem em imagem — se você quer movimento contínuo e suave, o caminho é vídeo preso ao scroll, não este componente.
← AnteriorSections (tela cheia) Próximo →SVG Draw (traço)