nike-better-world

A imersão do efeito Parallax

Curso AI+Mobile em São Paulo

Dias 24 e 25 de setembro  |  Arquitetura de Informação + Mobile

     

    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.

    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:

    Publicado por

    Edu Agni

    Edu Agni é consultor especialista em User Experience. Trabalha há onze anos com projetos nas áreas de design, usabilidade, arquitetura de informação e front-end. É criador e editor do UX.BLOG, curador da área de design e multimídia da Campus Party Brasil e facilitador do curso UX Weekend. Em 2014 fundou a Mergo, uma agência focada em User Experience e Usabilidade.

    Deixe uma resposta

    O seu endereço de e-mail não será publicado.