JS Module

Parallax [sw-parallax]

Efeito parallax em backgrounds, elementos e movimento do mouse — velocidade, tipo, direção, range e suporte mobile configuráveis via atributos HTML.

1. Parallax de Background

Adicione sw-parallax 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 — sw-parallax-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 — sw-parallax-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 — sw-parallax-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 — sw-parallax-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 — sw-parallax-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.

20 px

range: 20

60 px

range: 60

Ilimitado

sem range

8. Mouse Parallax — sw-parallax-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 — sw-parallax-mobile="false"

Em telas ≤ 768 px o parallax não é inicializado quando sw-parallax-mobile="false". Recomendado para economizar bateria e renderização em dispositivos móveis.

10. 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.

11. Parallax Fixed — Imagem Estática

A imagem não se move — a página desliza por cima dela. Efeito de "janela" sobre o fundo. Role a página para sentir o efeito.

Role a página

A imagem fica parada enquanto o conteúdo passa

Continue rolando — a página passa por cima da imagem fixa acima.

Referência de Atributos

Atributo Padrão Descrição
sw-parallax ou swparal — Ativa o efeito parallax no elemento
sw-parallax-type background background move background-position · element move via transform · mouse segue o cursor · fixed imagem estática
sw-parallax-speed 0.4 Intensidade do movimento (0.1 = sutil, 0.8 = dramático)
sw-parallax-dir vertical vertical (eixo Y) · horizontal (eixo X) · both (ambos)
sw-parallax-inv false Inverte a direção do movimento (true / false)
sw-parallax-range 0 Limite máximo de deslocamento em px (0 = ilimitado)
sw-parallax-mobile true false desativa o efeito em telas ≤ 768px