O que é o Parallax e como se faz? (com exemplos)

O que você já viu mil vezes, com certeza: você entra em um site, você faz o scroll e, de repente, o fundo parece se mover a uma velocidade diferente do que o conteúdo, criando um leve efeito de profundidade e deixando ver, partes que antes não viste. É chamado Parallax (em português paralaxe) e é uma tendência cada vez mais presente no mundo do web design.

Ante a queda em desuso do Flash e o auge do design plano, este recurso é muito útil para dotar as web de um certo dinamismo e combater a planitude. Também não podemos esquecer que os dispositivos móveis promovem a verticalidade do projeto web, pelo que o efeito de Parallax é mais do que interessante para agregar valor ao tedioso scroll e surpreender o usuário com algo que não se espera.

O que é o Parallax?

Embora pareça uma tendência muito atual (e de fato o é no mundo do web design), o Parallax é, na verdade, um truque com muita história, desenvolvido pela Disney, para dar aos seus filmes de desenhos animados de uma clara tridimensionalidade, tentando fazer com isso um maior realismo. A invenção foi batizada como “câmera multiplano” e, mais tarde, se adaptou ao mundo dos videjuegos em 2D, como o Moon Patrol (1982). Este vídeo e dormir explica perfeitamente o seu funcionamento:

Ideal para Storytelling

Um site com Parallax é muito sofisticado (para bbc), mas na realidade não é apropriado usá-lo pelo simples fato de seguir a tendência. A presença deste tipo de efeitos pode ser tão surpreendente para o usuário como cansina, então não deixe nada ao acaso. O ideal é que você aproveite este recurso estético como complemento narrativo, e o certo é que o Parallax é perfeito para landing pages, ou sites que tenham algo muito concreto que contar em vários passos. Nestes casos, o efeito de profundidade e linearidade que proporcina o Parallax são perfeitos para imergir o usuário em história com uma experiência de comunicação muito mais divertida e próxima a outros meios como o jogo ou a banda desenhada. Um exemplo perfeito seria esta espetacular novela gráfica desenvolvida para a Peugeot.

Como se faz o efeito Parallax?

Um pouco de HTML5 e CSS3 é suficiente para criar a ilusão de profundidade que fornece um Parallax. Se você gosta de necessidade de lidar com o código tem um monte de tutoriais on-line que estão muito bem, como o de Pixel Acres ou de Tuts+.

Mas se você não quiser se complicar sua vida, prova Parallax.js uma prática biblioteca de javascript que detecta a orientação dos dispositivos móveis através do giroscópio e acelerômetro, ótimo.

10 exemplos muito legais

Agora é aprender com os mestres, deixamos-vos com uma coleção de páginas com Parallax que seguro que acabam de convencê-lo, se você ainda tinha dúvidas, o que é legal esse efeito.

Se quiser ver mais passa por esta seção de Awwwards

E tu, como te anima a dar profundidade ao seu site? Já sabe, Parallax :)