Scroll Engine

Scroll Mount/Unmount

Elementos montam ao entrar na viewport e desmontam ao sair. Bidirecional - funciona tanto descendo quanto subindo o scroll.

Scroll down → monta
Scroll up → desmonta
14 tipos de animação
Delays combináveis
Role para ver
1

14 Tipos de Animação

Cada elemento usa data-y2-scr com um tipo diferente. Role para cima para vê-los desmontando.

up data-y2-scr="up"
down data-y2-scr="down"
left data-y2-scr="left"
right data-y2-scr="right"
in data-y2-scr="in"
out data-y2-scr="out"
fade data-y2-scr="fade"
blur data-y2-scr="blur"
pop data-y2-scr="pop"
3dl data-y2-scr="3dl"
3dr data-y2-scr="3dr"
flip data-y2-scr="flip"
skew-l data-y2-scr="skew-l"
skew-r data-y2-scr="skew-r"
2

Stagger - Cascata com dly-*

Combine data-y2-scr com as classes de delay para criar entradas em sequência.

.dly-1 0.1s
.dly-2 0.2s
.dly-3 0.3s
.dly-5 0.5s
left dly-1
left dly-3
left dly-5
left dly-7
3

Bidirecional

Scroll para baixo: elementos entram da direção definida.
Scroll para cima: elementos saem rápido para cima (ou para baixo se estiverem abaixo da viewport).

SCROLL → ENTRADA

Entra subindo
Entra da direita
Pop spring

SCROLL → SAÍDA

Sai para cima
Borrão ao sair
Encolhe ao sair

TEXTO COM STAGGER

Cada linha

entra separada

criando ritmo.

Combine com data-y2-scr em parágrafos para criar um efeito de leitura natural. O segredo é usar delays curtos (0.1-0.2s) entre elementos de texto.

Sem JS extra
Só um atributo
Acessível
5

Exemplo Real - Seção de Serviços

Isso é como você usaria em um site real.

NOSSOS SERVIÇOS

Tudo que você precisa

para lançar seu produto digital.

Design UI

Interfaces bonitas que convertem.

Desenvolvimento

Frontend e backend de alta performance.

Lançamento

Deploy, SEO e monitoramento incluídos.

200+
Projetos
98%
Satisfação
5 anos
Experiência
6

Velocidades spd-*

Combine com as mesmas classes de velocidade do sistema de animações.

.spd-f 0.25s - rápido data-y2-scr="up" class="spd-f"
base 0.55s - padrão data-y2-scr="up"
.spd-s 0.9s - lento data-y2-scr="up" class="spd-s"
.spd-xs 1.6s - dramático data-y2-scr="up" class="spd-xs"

Referência Rápida

Ver todas animações Utilitários Atômicos