Tela 01
Cada bloco vira uma tela cheia.
A primeira fica visível até a próxima cobrir ela.
Componente · Telas cheias
O Sections transforma um grupo de blocos em uma sequência de telas cheias que se revezam conforme a rolagem — como passar slides. Cada tela pode empilhar por cima da anterior, deslizar de um lado, dar um zoom ou até correr na horizontal.
Role devagar pelo quadro abaixo: três telas coloridas se revezam ocupando o espaço inteiro, uma cobrindo a anterior conforme você desce.
A primeira fica visível até a próxima cobrir ela.
Sem clique, sem seta — só descer a página.
Uma ideia forte por tela, no seu próprio ritmo.
O grupo recebe data-sw="sections". Cada tela é um filho direto marcado com data-sw-section. Precisa de pelo menos duas.
<div data-sw="sections" data-sw-fx="cover">
<article data-sw-section>Tela 01</article>
<article data-sw-section>Tela 02</article>
</div>Use qualquer um destes nomes em data-sw-fx. Também dá para combinar mais de um, separando por barra vertical — data-sw-fx="cover|zoom|fade" — e cada tela usa o próximo da lista.
stackcoverslide-upslide-downslide-leftslide-right
fadezoomscalemaskskewfold
h-scrollh-scroll-right
h-scroll e h-scroll-right são especiais: em vez de telas cobrindo umas às outras, elas correm lado a lado na horizontal, como um trenzinho, enquanto a rolagem continua sendo feita normalmente na vertical.
data-sw-fxO efeito de troca entre telas (veja a lista acima).Padrão: coverdata-sw-mobileCom o valor flow, desliga o efeito de telas presas no celular e deixa cada uma no fluxo normal da página, uma embaixo da outra.Exemplo: data-sw-mobile="flow"data-sw-scrubO quanto a troca de tela "atrasa" atrás do movimento do dedo ou mouse.Padrão: 0.7Com movimento reduzido ativado, o Sections se desliga: cada tela vira um bloco comum, empilhado no fluxo normal da página, sem prender a rolagem.