JS Module

Parallax Y2Prl

Efeito parallax em backgrounds, elementos e mouse - velocidade, tipo, direção, range e mobile configuráveis via atributos.

1. Parallax de Background

Adicione y2paral em qualquer elemento com background-image. O JS move o background-position-y conforme o scroll. Role a página para ver.

Role para ver o parallax

O fundo se move mais devagar que o conteúdo

2. Velocidades — y2paral-speed

De 0.1 (sutil) a 0.8 (dramático). Role e observe cada coluna mover-se em ritmo diferente.

0.1 Sutil
0.3 Moderado
0.5 Intenso
0.8 Dramático

3. Tipo Elemento — y2paral-type="element"

Em vez de mover o background, o próprio elemento é deslocado via transform: translate(). Ideal para criar profundidade entre camadas na mesma cena. Role a página.

Lento

speed 0.15

Médio

speed 0.35

Rápido

speed 0.6

4. Camadas em Profundidade

Combine múltiplos elementos com velocidades diferentes na mesma cena. Mais lento = parece mais distante. Mais rápido = parece mais próximo.

🚀

6 camadas em profundidade

Cada elemento tem speed diferente

5. Inversão - y2paral-inv="true"

Inverte o sentido do movimento. Compare lado a lado - role para ver o background esquerdo subindo enquanto o direito desce.

Normal

inv: false

Invertido

inv: true

6. Direção - y2paral-dir

Controla o eixo de movimento. Use horizontal para deslocar lateralmente. Em type="element", both move em ambos os eixos ao mesmo tempo.

vertical

dir: vertical

horizontal

dir: horizontal
both

both

type: element + dir: both

7. Limite de Deslocamento - y2paral-range

Define o máximo de pixels que o elemento pode se deslocar. Sem range o movimento é ilimitado. Com range, o efeito para ao atingir o limite - útil para evitar bordas visiveis em backgrounds menores.

20 px

range: 20

60 px

range: 60

Ilimitado

sem range

8. Mouse Parallax - y2paral-type="mouse"

O elemento reage à posição do cursor dentro dele. Mova o mouse sobre cada box. Ao sair, retorna suavemente à posição original.

Vertical

dir: vertical

Horizontal

dir: horizontal

Ambos (X + Y)

dir: both

Invertido

dir: both — inv: true

Range 30px

range: 30

Rápido

speed: 0.3

9. Desativar em Mobile - y2paral-mobile="false"

Em telas <= 768 px o parallax não é inicializado quando y2paral-mobile="false". Recomendado para backgrounds com overflow:hidden que podem gerar bordas visiveis em dispositivos móveis.

10. Exemplo Real - Hero com Camadas

Background com parallax lento + elementos decorativos em velocidade média + conteúdo estático em cima. Use inset:-25% para evitar bordas ao rolar.

PRODUTO DIGITAL

Seu próximo projeto
começa aqui

4 camadas em velocidades diferentes - role a página.

Quick Reference

Atributo Padrão Descrição
y2paral - Ativa o parallax no elemento
y2paral-type background background - move background-position element - move via transform mouse - segue o cursor
y2paral-speed 0.4 Intensidade do efeito (0.1 = sutil 0.8 = dramático)
y2paral-dir vertical vertical horizontal both (ambos os eixos - válido em element e mouse)
y2paral-inv false true inverte o sentido do movimento
y2paral-range - Deslocamento máximo em pixels - limita o efeito mesmo com speed alto
y2paral-mobile true false desativa o parallax em telas <= 768 px