Exemplo 2 · Fundo fixo + horizontal

Mar Profundo

O cenário fica preso na tela enquanto o texto rola por cima dele — o efeito parallax mais clássico de todos, feito com background-attachment: fixed.

↓ role ↓

Fundo fixo

Role a página: o gradiente azul não acompanha o scroll — ele parece "colado" na tela. Só o conteúdo se move por cima dele.

🐠 🐟 🐠 🐡 🐟 🐠 🐟
🦈 🦑
🌿 🌿 🌿 🌿

Correnteza

Role e observe: as bolhas vão para a esquerda, os peixes para a direita, o tubarão quase não se move — cada camada tem velocidade e sentido próprios.

Parallax horizontal

Aqui o deslocamento é em translateX: o progresso da rolagem é convertido em movimento lateral, com velocidades positivas e negativas para criar contraste de direção.