Parallax- Nova tendência da web vindo do mundo dos games

Você sabe o que é Parallax?? Já ouviu falar sobre essa tecnologia?

Se sim ou se não, vale a pena continuar com a gente, pois nesse texto falaremos do que se trata! 😉

O que é Parallax?

Parallax (ou Paralaxe) é uma forte tendência no World Wide Web (WWW).

Trazido do mundo dos vídeos games, trata-se da utilização de efeitos em páginas onde todo conteúdo está envolvido na movimentação do mouse.

Poucos sabem, mas além de tudo, é um efeito muito comum em jogos como Super Mário e Sonic.

De forma resumida, este efeito se dá através da mesma movimentação de dois planos em velocidades diferentes.

Graças às novas atualizações das “tecnologias” HyperText Markup Language (HTML5), Cascading Style Sheets (CSS3) e JavaScript, está se tornando cada vez mais possível criar efeitos avançados, interessantes e animados em seu browser (navegador web).

Como surgiu?

Mundo dos games
O parallax surgiu há bastaaaante tempo! Para se ter uma ideia, o efeito está presente em Super Mário World!

De acordo com o pessoal do Blog Polvo:

“Surgiu como um efeito visual 2D presente nos jogos em que o fundo era divido em partes e cada uma se apresentava com uma certa velocidade criando uma ilusão de profundidade durante a jogatina. ”

Como citamos anteriormente, um dos jogos mais populares que se utilizam do efeito parallax até hoje é o Super Mário.

Sim! Embora o efeito parallax sendo usado na web não seja algo tão antigo, lá em meados dos anos 80, o conceito já era aplicado.

Como eles faziam isso?

Vamos dar uma olhadinha no gif abaixo para podermos entender melhor.

O efeito nos dá a noção de que há dois planos gerados: a frente e o fundo.

As figuras e imagens se movimentando à frente, servem como plataforma para o personagem, já as que estão atrás servem para dar uma noção de profundidade.

“Você pode visualizar árvores, nuvens, o sol e muito outros detalhes, e por incrível que pareça eles estão no mesmo plano, porém nosso cérebro interpreta como se fossem camadas diferentes.”

Quem diria que fomos enganados por todos esses anos, não é mesmo?!

Como podemos usar na Web?

Na web, o efeito parallax é utilizado em páginas únicas onde seu controle maior é através do mouse.

Assim, temos a impressão que os objetos que aparecem na tela se movem de acordo à rolagem da página.

Ele envolve um fundo único se movimentando em um ritmo inferior em primeiro plano. Geralmente com uma cor diferente e mais escura que o plano sobreposto, cria assim um efeito 2D, parecido com os que os games utilizam, e o melhor: sendo feito com apenas linguagem de marcação e estilos que você conhece HTML5, CSS3 e JavaScript! Bacana, não?!

Só não pode exagerar!

Mas apesar de tudo, é importante ter em mente o uso com cautela. Inserir em muitas páginas do mesmo domínio pode causar exagero e espantar o usuário, além de se tornar péssimo para a usabilidade e acessibilidade, gerando uma experiência de usuário ruim.

Se implementado da maneira correta, o parallax além de chamar a atenção, ainda pode proporcionar ao usuário um efeito visual interessante.

Quer um exemplo de demonstração do Parallax? Clique aqui e veja a demonstração!