● Lab 11 — Extras 2
Mais recursos
Extras 2
Countdown, Text Shuffle, Glow, Rotate on Scroll e Scale on Scroll.
1. Countdown
Timer regressivo declarativo — sm-countdown
365d:12h:30m:45s
sm-countdown
Countdown Básico
Timer regressivo para uma data alvo.
<div sm-countdown="2025-12-31T23:59:59"
sm-countdown-format="dhms">
365d:12h:30m:45s
</div>
12h 30m 45s
sm-countdown-format="hms"
Sem Dias
Apenas horas, minutos e segundos.
<div sm-countdown="2025-06-01"
sm-countdown-format="hms"
sm-countdown-separator=" ">
12h 30m 45s
</div>
2. Text Shuffle
Embaralhamento de texto — sm-text-shuffle
SHUFFLE AUTOMÁTICO
sm-text-shuffle
Shuffle Automático
Texto embaralha automaticamente ao carregar.
<span sm-text-shuffle>
SHUFFLE AUTOMÁTICO
</span>
PASSE O MOUSE
sm-text-shuffle-hover
Shuffle no Hover
Embaralha ao passar o mouse.
<span sm-text-shuffle
sm-text-shuffle-hover>
PASSE O MOUSE
</span>
3. Glow Effect
Brilho neon em texto — sm-glow
BRILHO VERDE
sm-glow
Glow Básico
Texto com brilho neon estático.
<h1 sm-glow
sm-glow-color="#4ade80"
sm-glow-intensity="25">
BRILHO VERDE
</h1>
PULSANDO
sm-glow-pulse
Glow Pulsante
Brilho que pulsa infinitamente.
<h1 sm-glow
sm-glow-color="#f472b6"
sm-glow-pulse>
PULSANDO
</h1>
4. Rotate on Scroll
Rotação progressiva no scroll — sm-rotate-on-scroll
360°
sm-rotate-on-scroll="360"
Giro Completo
Gira 360° ao rolar a página.
<div sm-rotate-on-scroll="360">
Gira 360°
</div>
90°
sm-rotate-on-scroll="90"
Meia Volta
Gira apenas 90° ao rolar.
<div sm-rotate-on-scroll="90">
90 graus
</div>
5. Scale on Scroll
Escala progressiva no scroll — sm-scale-on-scroll
Cresce
sm-scale-from="0.4" sm-scale-to="1"
Cresce
Elemento cresce de 0.4 para 1 ao rolar.
<div sm-scale-on-scroll
sm-scale-from="0.4"
sm-scale-to="1">
Cresce
</div>
Encolhe
sm-scale-from="1.5" sm-scale-to="1"
Encolhe
Elemento encolhe de 1.5 para 1 ao rolar.
<div sm-scale-on-scroll
sm-scale-from="1.5"
sm-scale-to="1">
Encolhe
</div>