● Lab 10 — Extras
Novos recursos
Extras
Lazy Loading, Parallax Mouse, Match Media, Keyframes e Stagger Grid.
1. Lazy Loading
Imagens carregam quando entram no viewport — sm-lazy
sm-lazy
Lazy Loading Básico
Imagem carrega sob demanda com animação fade-up.
<img sm-lazy sm-lazy-src="foto.jpg"
src="placeholder.jpg"
sm-animate="fade-up">
sm-lazy + sm-animate="zoom-blur"
Lazy + Zoom Blur
Imagem carrega com efeito de zoom + desfoque.
<img sm-lazy sm-lazy-src="foto.jpg"
src="placeholder.jpg"
sm-animate="zoom-blur">
2. Parallax Mouse
Efeito parallax guiado pelo mouse — sm-parallax-mouse
30px
15px
sm-parallax-mouse
Parallax Simples
Dois cards se movem com intensidades diferentes ao mouse.
<div sm-parallax-mouse
sm-parallax-mouse-strength="30">
Card
</div>
Só X
sm-parallax-mouse-x="40"
Movimento Horizontal
Só se move no eixo X (esquerda/direita).
<div sm-parallax-mouse
sm-parallax-mouse-x="40"
sm-parallax-mouse-y="0">
Só X
</div>
3. Match Media
Animações responsivas por breakpoint — sm-match-media
Efeito Responsivo
Redimensione a janela e recarregue:
<768px → fade-up
768-1199px → zoom-in
>1200px → flip-left
Efeito ativo: carregando...
sm-match-media
Breakpoints Responsivos
Efeito diferente conforme a largura da tela.
<div sm-animate="fade-up"
sm-match-media='{"768":"zoom-in","1200":"flip-left"}'>
Responsivo
</div>
4. Keyframes
Animação em múltiplos passos — sm-keyframes
3 passos
sm-keyframes
3 Passos
Slide → Scale → Rotação em sequência.
<div sm-keyframes='[
{"from":{"x":-80},"to":{"x":0}},
{"from":{"scale":1},"to":{"scale":1.2}},
{"from":{"rotation":0},"to":{"rotation":360}}
]'>...</div>
Custom
sm-keyframes + duration
Timing Customizado
Duração e easing diferentes em cada passo.
<div sm-keyframes='[
{"from":{},"to":{},"duration":0.6},
{"from":{},"to":{"skewX":-10}},
{"from":{},"to":{"skewX":0},"duration":0.3}
]'>...</div>
5. Stagger Grid
Stagger 2D em grid — sm-stagger-grid
1
2
3
4
5
6
7
8
sm-stagger-grid-dir="rows"
Rows (padrão)
Preenche linha por linha →
<div sm-stagger-grid
sm-stagger-grid-cols="4"
sm-stagger-grid-dir="rows">
<div>1</div>...
</div>
1
2
3
4
5
6
7
8
sm-stagger-grid-dir="diagonal"
Diagonal
Preenche em diagonal ↘
<div sm-stagger-grid
sm-stagger-grid-cols="4"
sm-stagger-grid-dir="diagonal">
<div>1</div>...
</div>
1
2
3
4
5
6
7
8
9
sm-stagger-grid-dir="center"
Center
Expande do centro para fora
<div sm-stagger-grid
sm-stagger-grid-cols="3"
sm-stagger-grid-dir="center">
<div>1</div>...
</div>