Conhecendo mais sobre PARALLAX

  • Home
  • Css
  • Conhecendo mais sobre PARALLAX

Comentando sobre design, foco e experiência do usuário esses dias com amigos, percebi que o Parallax apareceu várias vezes na conversa. 

O efeito parallax no web design virou tendência, é comum utilizarmos sites que utilizam essa técnica em vários cantos da web, inclusive seu auge deve ocorrer em 2016.

Esse efeito é apenas apresentar imagens em camadas assim dando uma impressão de camadas no site. Focando os olhos diretamente em movimento e profundidade o Parallax de quebra, as transições entre diferentes tópicos ou assuntos são feitas com tipos de animações, que servem como um atrativo divertido para quem está navegando.

Imagine vc andando de bicicleta, e quando olha pros lados vê postes, atras dele muros, paisagens, e de repente pessoas passando por sua visão e de vez em quando percebe que estão ou próximas ou longe.

É justamente esse o efeito Parallax, mover o fundo em uma velocidade mais lenta do que as imagens de primeiro plano. 

E ainda digo mais, essa técnica não vêm de hoje da web, lembra que teatros, desenhos e etc usam isso para dar um atrativo em seus shows?

Mais na web vale lembrar que só foi possível esse efeito com a chegada nos browsers mais modernos com HTML5 e CSS3.

Para construirmos um Parallax legal temos que fazer que ele atue com o efeito que siga uma história, uma narrativa. Toda vida que a página for rolada os elementos devem contar essa história, sim os elementos tem que ser pensados para que tenha um sentido e não apenas o efeito Parallax. Outra maneira também é que esse efeito Parallax possa mostrar de maneira organizada as páginas da empresa em uma só, assim usando para criar uma landing page.

Apesar de ser algo bem legal e divertido temos que ter cuidado para não exagerar, afinal todo encanto pode acabar se não for exibido corretamente e com sentido. 

Abaixo tem alguns exemplos legais de Parallax

http://www.superlime.fr/

dsignerbycreator-01

http://restaurantleduc.com/

dsignerbycreator-02

http://melanie-f.com/en/

dsignerbycreator-03

Deixe uma resposta

Open chat