SWCore / Animações / Conteúdo responsivo

Conteúdo responsivo Animações

Regras extras do Sections pra quando o conteúdo de uma cena é maior que a tela, ou pra abandonar o modo "cena presa" em telas pequenas.

O que é

Complemento do Sections: decide se uma cena precisa caber inteira na tela, precisa de rolagem interna própria, ou se deve simplesmente devolver o fluxo normal (sem prender scroll) — em geral, abaixo de um tamanho de tela.

Como funciona

Cada data-sw-section pode declarar como seu próprio conteúdo se comporta dentro da cena presa. Em telas pequenas, data-sw-mobile="flow" desativa o comportamento cinematográfico inteiro e volta pro scroll comum — normalmente a escolha certa pra conteúdo editorial e formulários.

Exemplos

Essa seção prende a tela de verdade e se solta da moldura enquanto você rola — role bem devagar pra ver o efeito.

Cena 1 de 3 — cabe inteira na tela

Cena normal

Role pra baixo — a próxima cena tem mais conteúdo do que a altura da tela.

Cena 2 de 3 — rolagem interna própria

Item 01 — este bloco é maior do que a tela, então data-sw-h reserva distância extra de scroll só pra ele.

Item 02 — o scroll continua revelando conteúdo pra baixo, sem trocar de cena ainda.

Item 03 — a cena 3 só começa a transição depois que essa rolagem interna termina.

Item 04 — fim do conteúdo desta cena.

Cena 3 de 3

Próxima cena

<div data-sw="sections" data-sw-fx="stack|slide-up|mask" data-sw-mobile="flow">
  <section data-sw-section data-sw-size="fit">Cena normal</section>
  <section data-sw-section data-sw-h="260%" data-sw-h-at="0-499:400%|500-899:320%|900-*:240%">
    <div data-sw-scroll>...conteúdo maior que a tela...</div>
  </section>
  <section data-sw-section data-sw-size="fit">Próxima cena</section>
</div>

Atributos

data-sw-size="fit"
conteúdo curto, precisa caber inteiro numa tela (padrão implícito)
data-sw-size="flow"
conteúdo longo — essa seção específica sai do modo presa e volta ao fluxo normal
data-sw-size="scroll"
rolagem interna própria, pra painéis/listas/tabelas/código dentro da cena
data-sw-mobile="flow"
no data-sw="sections" pai — abaixo de 768px, ignora o efeito cinematográfico inteiro
data-sw-h / data-sw-h-at
altura da rolagem interna (data-sw-scroll) — fixa ou por faixa de largura, formato "0-499:400%|500-899:320%|900-*:240%"

Variantes

Nenhum.

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

  • Só faz sentido dentro de um Sections — não é um efeito independente.

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

  • Não existe rolagem interna própria (scrollbar dentro da cena) — data-sw-size="scroll" ainda usa o scroll principal da página, só reserva mais distância pra ele.
  • A transição externa seguinte só começa depois que o deslocamento interno da seção termina — cenas com data-sw-h grande atrasam a próxima transição.
← AnteriorTexto Próximo →Canvas