Componente · Vídeo por scroll

Frames

Tire 40 fotos de algo em movimento — uma planta crescendo, uma pessoa andando — e o Frames as transforma num "vídeo" controlado pela rolagem: rolar para baixo avança os quadros, rolar para cima volta. Nenhum arquivo de vídeo é necessário, só uma sequência de imagens.

Como pensar nisso

É um flipbook — aquele caderninho de desenhos que vira filme quando você passa as páginas rápido com o polegar. Aqui, quem passa as páginas é a rolagem. Role bem devagar pelo quadro abaixo.

1 / 40

O código

Duas formas de fornecer os quadros: uma imagem única em grade (uma "folha de contato", mais leve e rápida) ou várias imagens separadas.

HTML · com uma folha de contato (recomendado)
<div data-sw="frames" data-sw-frame-sprite="8x5" data-sw-end="220%">
  <div data-sw-frame-stage
       style="background-image:url(fita.webp)"></div>
</div>
HTML · com imagens separadas
<div data-sw="frames">
  <div data-sw-frame-stage>
    <img data-sw-frame src="quadro-01.webp" alt="">
    <img data-sw-frame src="quadro-02.webp" alt="">
  </div>
</div>

Ajustes

data-sw-frame-spriteO formato da grade da folha de contato: colunas × linhas.Exemplo: data-sw-frame-sprite="8x5" (40 quadros)
data-sw-frame-countQuantos quadros usar, se a grade tiver espaços sobrando.Padrão: colunas × linhas
data-sw-endQuanto de rolagem a sequência inteira ocupa.Calculado automaticamente pelo número de quadros
i

Prefira a folha de contato. Uma única imagem com todos os quadros é drasticamente mais rápida de carregar do que dezenas de arquivos separados — o navegador baixa um arquivo só em vez de fazer 40 pedidos diferentes.