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. Assim sendo 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.

Mas afinal, 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.

Assim também 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. Com isso, cria-se a ilusão de profundidade de planos 2D.

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

O efeito parallax foi muito utilizado em jogos de videogame
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?

Segundo Rafael Franco, Diretor de Design e Inovação da Inter.net, em entrevista à Revista Wide, a resposta é não.

Afinal, basta movimentar duas camadas de elementos em velocidades distintas para ter o efeito. Franco 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 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

Gostou desse conteúdo? 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


Big House é uma agência digital que transforma boas ideias em resultado. Atuando com Marketing Digital e desenvolvimento web desde 2011, somos uma equipe multidisciplinar certificada em Inbound Marketing focado nas melhores estratégias digitais. Entre com contato conosco pelas nossas redes, leia o conteúdo no Blog da Big House ou acesse nosso site para conhecer a Big.