A imersão do efeito Parallax

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. Com isso, objetos próximos têm uma maior Parallax que objetos mais distantes, quando observado de posições diferentes. Dessa forma, podemos dizer que o Parallax é o que nos dá a noção de profundidade em nosso campo de visão.

Na computação gráfica, o efeito Parallax costuma ser simulado com a técnica de mover imagens de fundo em uma velocidade mais lenta do que as imagens de primeiro plano, criando no nosso cérebro a ilusão de profundidade em planos 2D. Muito usada em jogos, essa técnica foi popularizada por volta de 1982 no jogo Moon Patrol.

Podemos entender melhor como funciona o efeito Parallax no vídeo abaixo, que usa como exemplo a técnica aplicada a um cenário no estilo Super Mario.

[youtube https://www.youtube.com/watch?v=1u5cGZPdyEk?rel=0]

O Parallax na web

Já faz um tempo que o efeito Parallax saltou dos jogos para os sites, e através de diferentes técnicas se tornou uma das tendências mais atraentes no design para web. Com o uso principalmente de Javascript, e por vezes de HTML5 e CSS3, muitos sites criaram efeitos bem interessantes e criativos, que proporcionam belas experiências e aumentam a imersão do usuário. Normalmente, esse efeito está atrelado a rolagem da página.

Um dos primeiros sites a utilizar essa técnica foi o Nike Better World, que faz uso do Parallax no sentido vertical. Entre outros sites interessantes que também usam esse efeito estão o Smokey Bones, Volkswagen Beetle, Sony Table S, Webdesign Karlsruhe e o Mario Kart Wii Experience.

Smokey Bones

Smokey Bones

Smokey Bones

Para conhecer mais projetos web usando Parallax, recomendo que você dê uma olhada na grande coletânea feita pelo blog Splashnology. Caso você esteja interessado em aplicar o efeito Parallax em seus projetos, aqui vão algumas dicas de bons tutoriais:

Rolar para cima