Introdução

Fala pessoal! Hoje eu venho a trazer para vocês um post bem simples, mais para vocês se inspirarem um pouco e verem algumas das várias possibilidades de uma técnica que eu acho bastante interessante. Eu vou começar a criar posts que vão entrar na categoria de collections, onde vou juntar vários sites para vocês se inspirarem que utilizem certa técnica ou tecnologia.

Enquanto vou escrevendo, vou ouvindo um bom som na playlist Volume Máximo do Spotify.

O efeito parallax

O efeito parallax veio dos videogames e desenhos clássicos e servia para compôr cenários dando a sensação de profundidade. Onde os elementos de fundo se movem em tempos diferentes dos elementos da frente. O nome da técnica é derivado da palavra grega "parallaxis" que significa "alteração".

Hoje essa técnica é bastante utilizada em diversos sites, seja para contar histórias ao mover o scroll, para seguir o mouse enquanto o usuário, ou até mesmo para deixar só um efeito sutil para o usuário enquanto ele desce a página.

Segue aqui um vídeo do próprio Walt Disney explicando como funciona esse efeito tão interessante:

Exemplos

Alquimia WRG

Animação de background baseada no movimento do mouse. Vá para o site

Scroll for your Health

Scrolls que desenham ilustrações de cores sólidas pela tela. Vá para o site

Mélanie F - Slippers for children

Objetos com movimentações em tempos/velocidades diferentes ao decorrer da tela. Vá para o site

Giampiero Bodino - Italian High Jewellery

Várias ilustrações em camadas diferentes que são movimentadas baseadas no drag. Vá para o site

Anton & Irene

Site simples, com animações de hide/show/movimentação de acordo com o scroll. Vá para o site

Werkstatt - l'atelier interactif

Interação suave no scroll com uma máscara sendo formada entre as imagens dos projetos. Site belo, merece ser visto como um todo. Vá para o site

Giacomorelli

Mais um site com parallax utilizando a ideia de movimentação via mouse. Vá para o site

Social King. Social Media Studio

Site carregado de objetos em diferentes profundidades e movimentações. Vá para o site

You waste a lot of time at work

Esse site já merece um aplauso e uma lida só pelo conteúdo. Mas ele também utiliza parallax em backgrounds. Vá para o site

Make your money matter

Site em ilustração contando uma história a partir do scroll. Vá para o site

Every last drop

Site em ilustração contando uma história a partir do scroll. Vá para o site

The Arnold Clark Savings Challenge

Site utilizando scroll para animar e montar um infográfico. Vá para o site

Rumchata.com

Animações sutis nos elementos enquanto é feito o scroll. Vá para o site

Conclusão

Bom galera, espero que tenham se inspirado com esses vários sites maravilhosos. Eu sou viciado em ver referências e roubar pequenos detalhes para mim =p Então espero que tenha bastante gente que goste desse tipo de coisa também.