O efeito parallax existe desde os anos 40, quando foi utilizado pela primeira vez na produção de animações, e popularizado nos anos 80, quando foi implementado em jogos de videogame. Há alguns anos o efeito parallax foi resgatado pelo web design e atualmente é uma das tendências na criação e no desenvolvimento de sites.


Você também pode se interessar por estes posts:

7 tendências para web design em 2015 
INSPIRAÇÃO: 25 sites com parallax incríveis
– Planejamento estratégico para o seu site


Mas o que é o efeito parallax?

Tecnicamente, Parallax é a diferença na posição de objetos vistos em diferentes faixas de visão, medido pelo ângulo de inclinação entre as faixas. Na computação gráfica, o efeito costuma ser simulado com a técnica de mover imagens de fundo em uma velocidade mais lenta do que as imagens de primeiro plano, cirando uma ilusão de profundidade em planos 2D.

O efeito parallax foi muito utilizado em jogos de videogame

Aqui é possível ver um exemplo de efeito parallax no jogo Super Mario World.

Na web, o efeito parallax é usado geralmente em sites single-page, criando um efeito de movimento quando o usuário faz rolagem na página. A utilização da técnica resulta em sites mais criativos e que aumentam a imersão do usuário. Segundo artigo do Web Design Ledger, a utilização do efeito parallax melhora o engajamento dos sites em até 70%.

Usar a rolagem ao invés do clique é uma técnica de navegação brilhante por diversos aspectos. Ele requer menos carregamento de página, mas mais importante, ele facilita a criação de transições suaves de um ponto para outro, sem atualizações dissonantes. As informações simplesmente continuam fluindo.

É muito difícil implementar o efeito parallax?

Segundo Rafael Franco, Diretor de Design e Inovação da Inter.net, em entrevista à Revista Wide, a resposta é: não. Basta movimentar duas camadas de elementos em velocidades distintas para ter o efeito. Franco explica e ainda dá algumas dicas:

“Não é necessário nada além do bom e velho Javascript – para isso, já existem algumas bibliotecas na web como a Stellar.js e a Superscrollorama que ajudam a criar o efeito de forma simples.”

No entanto, é preciso ter alguns cuidados na utilização do efeito parallax. Caso você decida utilizá-lo em seu site, tenha em mente que esse design não se adapta muito bem a a tablets e smartphones, uma vez que o carregamento da sua página será mais demorado. Para estes dispositivos, prefira um layout responsivo.

Confira abaixo alguns exemplos de sites com efeito parallax:

Highway One

Exemplo de site com efeito parallax

James Bond 007 Cars Evolution

Sites incríveis com parallax

Atlantis World’s Fair

Sites com Parallax incríveis