Parallax Scrolling in Web Design - Concepts

Agora que entendemos a origem e os antecedentes do Parallax, vamos entender a história e o conceito de rolagem Parallax em web design.

Definição

De acordo com a Wikipedia - Parallax scrolling é uma técnica em computação gráfica em que as imagens de fundo passam pela câmera mais lentamente do que as imagens de primeiro plano, criando uma ilusão de profundidade em uma cena 2D e aumentando a sensação de imersão na experiência virtual.

A rolagem paralaxe foi empregada nos primeiros dias da animação. Muitos dos estúdios de animação (como a Disney) usaram câmeras multiplano para obter o efeito de paralaxe.

À medida que as tecnologias de computação gráfica evoluíram junto com as estruturas de ponta como JavaScript, os web designers e desenvolvedores agora podem construir sites com uma experiência rica. Embora a rolagem paralaxe tenha começado com algumas camadas, ela foi levada para o próximo nível com as barras de rolagem nos computadores. A técnica permaneceu a mesma, mas devido à sua aplicação para Scrolling, uma experiência única foi criada.

Exemplos

A rolagem paralaxe é amplamente usada em sites modernos. Como a rolagem paralaxe pode ser implementada para celulares e sites de desktop de uma só vez, a popularidade de tais sites disparou nos últimos anos.

Alguns exemplos de sites que empregam rolagem paralaxe são fornecidos abaixo -

Bear Grylls

Conforme a animação prossegue, você poderá ver como o conteúdo do site se torna interativo. Conforme você avança, mais e mais informações serão reveladas.

Faça o seu dinheiro importar

Para apresentar ao leitor os benefícios de uma cooperativa de crédito, este site o conduz através de uma história. Conforme você avança, as informações são reveladas de uma maneira única.

Infográfico da InfoQuest

A jornada de um funcionário para encontrar informações críticas em seu local de trabalho é retratada usando a experiência de rolagem.

GitHub 404

Isso é um pouco diferente da experiência usual de paralaxe, o objeto na parte superior da tela se move quando você passa o ponteiro do mouse sobre ele.

Aplicações de rolagem paralaxe

Até agora, deve estar claro a partir da definição e do plano de fundo que a rolagem paralaxe é útil em uma ampla variedade de mídia digital. Alguns dos aplicativos de rolagem paralaxe estão abaixo -

Design de jogo

A rolagem paralaxe é amplamente usada no design de jogos. O personagem precisa se mover em relação ao fundo e com o controle do jogador usando o mouse e o teclado, toda a experiência precisa mudar. O design do jogo é uma forma muito primitiva, porém moderna, de usar a rolagem paralaxe.

Sites

Para deixar o usuário agarrado ao site, alguma experiência dinâmica e diferenciada é importante. Como você deve ter notado nos exemplos de sites discutidos acima, a rolagem paralaxe aumenta o conteúdo por causa de sua representação de maneira interativa.