Drag, Flip, Observer
& Scroll Suave
Interações completas via atributos declarativos. Sem uma linha de JavaScript na sua página.
Parâmetros disponíveis
| Tag | Tipo | Descrição | Exemplo |
|---|---|---|---|
| sm-drag | string | Tipo de arraste: x, y, xy, rotation | "xy" |
| sm-drag-bounds | string | Limite do arraste ("parent" ou seletor) | "parent" |
| sm-drag-snap | JSON | Posições de encaixe ao soltar | "[0,100,200]" |
| sm-drag-inertia | presença | Física de inércia após soltar | — |
| sm-flip | presença | Ativa o Flip Plugin ao clicar no elemento | — |
| sm-flip-class | string | Classe CSS a alternar no flip | "is-big" |
| sm-flip-target | seletor | Alvo do flip (se diferente do elemento) | "#grid" |
| sm-observer | presença | Fullpage sections via Observer Plugin | — |
| sm-observer-type | string | Eventos detectados | "wheel,touch" |
| sm-scroll-to | seletor | Scroll suave ao clicar (ScrollToPlugin) | "#secao" |
| sm-scroll-offset | número (px) | Offset vertical do destino | "80" |
sm-drag — Draggable
Qualquer elemento arrastável. Tipos: x, y, xy, rotation. Bounds opcionais.
Drag livre (xy) com bounds
sm-drag-bounds="parent"
Drag só horizontal
sm-drag-bounds="parent"
Drag rotation — girar
Drag com snap (encaixe)
sm-drag-snap='{"x":[0,80,160,240,310]}'
sm-flip — Transição de Estado de Layout
Clique nos elementos abaixo. O Flip Plugin captura o estado antes e depois da mudança de CSS e anima a transição.
Flip de tamanho — card expande
sm-flip-class="is-big"
sm-duration="0.6"
Flip de layout — grid para lista
sm-flip-class="is-list"
sm-flip-target="#cards-grid"
sm-scroll-to — Scroll Suave
Links e botões com scroll animado. Usa o ScrollToPlugin do GSAP.
Botões de navegação suave
sm-duration="1"
sm-ease="power3.out">
Ir para seção
</button>
sm-observer — Fullpage Sections
O Observer Plugin detecta wheel/touch e desliza entre seções. A área abaixo é um exemplo interativo — use o scroll dentro dela.
Fullpage — 3 seções com deslize
sm-observer-type="wheel,touch">
<section sm-observer-section>1</section>
<section sm-observer-section>2</section>
<section sm-observer-section>3</section>
</div>
sm-drag — Avançado
Inércia, eixo Y, múltiplos draggables independentes e controle rotacional.
Drag com inércia — arraste rápido e solte
sm-drag-inertia
sm-drag-bounds="parent"
Slider vertical — eixo Y
sm-drag-bounds="parent"
Múltiplos draggables independentes
sm-drag="xy" sm-drag-bounds="parent"
Dial / Knob — controle rotacional
sm-flip — Avançado
O Flip Plugin captura o estado visual antes e depois de qualquer mudança de CSS e anima a transição. Clique nos elementos.
Card de produto — compacto → expandido
sm-flip-class="prod-full"
sm-flip-target="#prod-card"
Accordion — cada item com sm-flip próprio
sm-flip-target="#acc1"
Widget dashboard — número → tabela detalhada
sm-flip-class="dash-full"
sm-ease="back.out(1.2)"
sm-observer — Fullpage com 5 Seções
Conteúdo rico em cada seção — gradientes, ícones, badges, CTAs. Role com o mouse ou touch dentro da área.
5 seções fullpage — wheel + touch
sm-observer-type="wheel,touch"
sm-ease="expo.inOut"
sm-duration="0.85"
CSS OBRIGATÓRIO?
O Smooll injeta os estilos de comportamento mas não os estilos visuais. Três coisas precisam estar no seu CSS:
1. sm-drag — o elemento precisa ter position definido para bounds funcionar
Com sm-drag-bounds="parent", o elemento pai precisa ter position:relative e tamanho definido. O elemento arrastável precisa de position:absolute se usar bounds em container.
.container { position: relative; width: 100%; height: 200px; }
.drag-el { position: absolute; }
2. sm-flip — você precisa definir os dois estados CSS (antes e depois da classe)
O Flip captura a diferença de posição/tamanho entre o estado sem e com a classe CSS. Defina width, height, padding, etc. nos dois estados.
.meu-card { width: 120px; height: 80px; }
.meu-card.is-grande { width: 100%; height: 220px; }
3. sm-observer — o container precisa ter height definido (não pode ser auto)
O Observer usa position:absolute nas seções filhas dentro do container. O container precisa de altura explícita — height:100vh ou valor fixo.
[sm-observer] { height: 100vh; } /* já injetado pelo Smooll */
/* mas se estiver dentro de um demo, defina explicitamente */