Cena 01
Uma fita, várias cenas.
Cada bloco ocupa a janela inteira antes de dar lugar ao próximo.
Componente · Fita vertical
O Track empilha cenas dentro de uma janela que fica presa na tela, e desliza essa fita para cima conforme você rola — revelando uma cena de cada vez, com controle total do ritmo. É parecido com o Story, mas pensado para blocos maiores de conteúdo, não só frases curtas.
Pense numa fita fotográfica comprida, enrolada atrás de uma pequena janela: você gira o rolo (rolando a página) e cada quadro da fita passa pela abertura, um de cada vez. Role devagar pelo quadro escuro abaixo.
Cada bloco ocupa a janela inteira antes de dar lugar ao próximo.
A velocidade da fita é a velocidade da sua rolagem.
Cada cena pode ter bem mais conteúdo do que uma frase curta.
Três níveis: a janela presa (data-sw="track"), a fita dentro dela (data-sw-track) e cada cena da fita (data-sw-section). Precisa de pelo menos duas cenas.
<div data-sw="track" data-sw-end="280%">
<div data-sw-track>
<article data-sw-section>Cena 01</article>
<article data-sw-section>Cena 02</article>
</div>
</div>O tamanho de cada cena é decidido pelo seu CSS — normalmente a altura da tela inteira (100svh), como no exemplo acima. Quanto mais alta cada cena, mais rolagem é necessária para passar por ela.
data-sw-endQuanto de rolagem a fita inteira ocupa, do início ao fim.Padrão: número de cenas × 100%data-sw-scrubO quanto o deslize da fita "atrasa" atrás do movimento do dedo ou mouse.Padrão: 0.8