Capítulo 01
Tudo começa com uma ideia.
O primeiro capítulo apresenta o cenário.
Componente · Narrativa
O Story prende a seção na tela — como o Pin — mas em vez de mover um único objeto, ele troca capítulos inteiros de lugar, um saindo enquanto o outro entra. É a forma mais direta de contar uma sequência de 2 a 5 ideias sem o visitante precisar clicar em nada: o próprio ato de rolar vira o "avançar slide".
Role bem devagar pelo quadro escuro abaixo. Cada capítulo ocupa a tela inteira e dá lugar ao próximo, como um baralho de cartas sendo passado.
O primeiro capítulo apresenta o cenário.
O segundo capítulo muda o rumo da história.
O último capítulo fecha a ideia com clareza.
Cada capítulo é um elemento com data-sw-step, todos dentro da seção com data-sw="story". Precisa de pelo menos dois capítulos.
<section data-sw="story" data-sw-fx="slide" data-sw-end="280%">
<article data-sw-step>Capítulo 01</article>
<article data-sw-step>Capítulo 02</article>
<article data-sw-step>Capítulo 03</article>
</section>data-sw-fxO jeito como um capítulo sai e o próximo entra.slide · fade · zoom · leftdata-sw-endQuanto de rolagem a história inteira ocupa, do primeiro ao último capítulo.Padrão: número de capítulos × 100%data-sw-scrubO quanto a troca de capítulo "atrasa" atrás do movimento do dedo ou mouse.Padrão: 0.8Assim como o Pin, o Story sempre prende a tela — não existe uma versão "solta". Pense nele quando tiver uma sequência curta e linear de mensagens que fazem mais sentido uma de cada vez do que todas juntas.