O que é Efeito Parallax? Como e por que fazer, com exemplos
Atualizado: 5 de mar.
O efeito parallax de rolagem surgiu como uma das principais tendências do web design em 2011. Muitas modas já apareceram e desapareceram na Internet, mas a rolagem parallax parece ter conseguido estabelecer-se como uma peça de design que veio para ficar.
Quando se cria um site, a rolagem parallax pode ser uma excelente forma para adicionar profundidade e movimento à experiência de navegação. Neste artigo, explicamos com maior profundidade o que é rolagem parallax, com dez exemplos de sites inspiradores para você aprender, além de alguns templates para você poder começar:
O que é o efeito parallax?
Rolagem parallax é uma técnica de web design onde o background se movimenta em um ritmo mais lento que o primeiro plano. Isso resulta em um efeito 3D à medida que os visitantes rolam pela página, adicionando uma sensação de profundidade e criando uma experiência mais imersiva.
O efeito parallax é baseado em uma ilusão de ótica causada pelo fato de que o olho humano considera que os objetos que estão perto são maiores do que os que estão mais afastados. O resultado é que temos a percepção de que os objetos mais distantes movimentam-se mais lentamente do que os que estão próximos.
Esta percepção de que o movimento do plano de fundo é mais lento do que o movimento do primeiro plano já vem sendo usada há bastante tempo em diferentes meios, promovendo um efeito realista. O parallax começou na animação tradicional e até já foi usado no filme Branca de Neve e os Sete Anões da Disney, e em videogames como Super Mário. Com os avanços em CSS e HTML, os efeitos parallax evoluíram posteriormente, para o mundo do web design como o conhecemos hoje.
A seguir, veja dez exemplos de efeito parallax criados com Wix e escolhidos a dedo para inspirar seu web design:
Exemplos de sites com efeito parallax
A artista visual canadense Emilie De Grosbois é a criadora da Mild Design. O seu portfólio atrai os visitantes com uma sensação de acolhimento: uma série de imagens superdetalhadas que preenchem a tela e são mostradas em longa rolagem. Usando o efeito parallax, a transição de uma imagem para a outra não é apenas mais suave, mas também adiciona uma sensação de profundidade, como se as imagens estivessem delicadamente deslizando uma por cima da outra.
O site do festival 2019 OFFF leva os visitantes em para um passeio, com seu background em rosa bebê, um texto com fontes em tamanho grande e uma sensação de dinamismo. A página também é repleta de movimento, através de uma combinação de animações e parallax. À medida em que rolamos pela página, são revelados vídeos da conferência, e de seus palestrantes e atividades, além de muitos olhos piscando para a gente entrar no clima.
O arrojado site de currículo do engenheiro aeroespacial Chris Covert é, ao mesmo tempo, inovador e extremamente profissional. O design e interatividade do site conseguem injetar muito da personalidade do Chris em um conteúdo que normalmente seria entediante: uma lista das suas capacidades, experiência e formação. Usando o efeito de rolagem chamado “Surgir”, o Chris coloca imagens de uma página do CV ou de um cartão de visita no meio da tela, permitindo que o background por trás delas altere rapidamente enquanto as imagens ficam fixas alcançando, dessa forma, um resultado surpreendente.
O uso que a designer e ilustradora Ivy Chen faz do efeito parallax cria um site de portfólio único, onde seus trabalhos são revelados gradualmente através da mágica da rolagem. A Ivy nos leva em uma viagem através do seu trabalho multidisciplinar: uma ilustração de uma peça de vestuário que se transforma em uma roupa de verdade e, por fim, em uma expressão completa de um estilo de moda através de uma foto. É um efeito hipnotizante que, ao mesmo tempo, amplia e explica o conteúdo da página.
O site da designer de joias Hila Rawet Karni usa o efeito parallax para criar uma rolagem interessante, com diversas camadas. Sobrepondo imagens e texto, e fazendo de forma que esses elementos se movimentem em velocidades diferentes, a página parece estar em constante alteração. e formando novas composições à medida que a pessoa vai rolando. Repare, por exemplo, como a foto da mulher com vestido preto fica no mesmo lugar à medida que outros elementos flutuam ao seu lado, até que eventualmente a mulher também desliza para fora da tela, abrindo espaço para outras seções.
Além de ser absolutamente adorável, o site do Inky Blue Animal Rescue se orgulha de ter uma paleta de cores coesa, em azul e outros tons neutros (que naturalmente vêm do nome da organização) e um excelente uso do movimento. Acima da dobra do site, o nome da empresa em letras maiúsculas gigantes desliza ao longo da tela. Abaixo, um efeito parallax revela dois amiguíneos peludos à medida em que a pessoa vai rolando. Lá no final da página inicial, o rodapé traz o mesmo tipo de animação anterior, fazendo o site voltar ao ponto inicial.
Este site claro e elegante é o perfeito portfólio de modelo para a super modelo Karlie Kloss. O estilo de design visa a simplicidade em sua escolha de cores em tons de branco, cinza e preto e na quantidade generosa de espaço branco. Ao mesmo tempo, sua aparência clássica junto a pequenos toques dão ao site um estilo único: o uso sutil do rosa, a fonte em preto, a sensação de movimento inserida pelo efeito parallax e um vídeo em looping.
O site de fotografia da Hana Knizova, radicada em Londres, tem como característica uma longa rolagem de imagens parallax. As fotos na página inicial são uma introdução aos diversos projetos da Hana e às muitas características que ela tem como fotógrafa, desde fotografia editorial até o retrato, passando pelos ensaios de mães e filhos. As imagens também funcionam simultaneamente como um menu para o site, criando um sistema de navegação único onde cada imagem leva a uma página diferente.
O site do hotel brasileiro Vale das Nuvens é composto de várias faixas com rolagem parallax. Cada faixa tem seu respectivo botão de chamada de ação e mostra orgulhosamente uma imagem ou vídeo das instalações do hotel. O texto colocado ao centro de cada faixa se move a um ritmo ligeiramente diferente da foto no background, de forma a alcançar um efeito suave e fácil de olhar.
O site pessoal da designer gráfica e nômade digital Frankie Ratford é vibrante, colorido e borbulhante. A dobra superior é da cor do sol e tem diversas camadas de parallax: a própria Frankie fica estática em uma foto franca e descontraída. Por trás dessa foto, seu nome desliza para cima seguido pela seção da biografia que, por sua vez, desliza por cima da mesma imagem. O restante do site faz usa a rolagem parallax de forma mais sutil, trazendo mais informações.
Como usar o efeito parallax no seu site Wix
Para habilitar a rolagem parallax no seu site Wix, use faixas que tenham um background com cor, imagem ou vídeo. Para enriquecer o efeito, combine múltiplas faixas juntas.
Como habilitar rolagem parallax em uma faixa:
1. Adicione o efeito
No Editor, clique em “Adicionar” no menu à esquerda e, em seguida, escolha “Faixa”.
2. Altere o background
Clique em “Alterar Background da Faixa”. Aqui você pode alterar o background para uma cor, imagem ou vídeo à sua escolha.
3. Configurações
Clique em “Configurações” no Background da Faixa e sob “Efeitos de rolagem” escolha o efeito desejado (Parallax, Surgir, Zoom-In, Aparecer).
4. Verifique o efeito
Verifique o efeito no modo de Pré Visualização e caso necessário corrija.
Templates com efeito de rolagem parallax:
Uma opção diferente é começar com um template que já foi criado com o efeito parallax, e depois personalizar de acordo com as suas necessidades. Selecionamos três desses templates e você pode procurar outros na nossa página de templates:
Padaria: Um template de dar água na boca, composto por diversas faixas ao longo de toda a tela, sempre usando o efeito parallax. O efeito de cinemagrafia na terceira faixa dá ainda mais sensação de movimento.
Let’s Play: Este template de múltiplas camadas de parallax cria uma aparência sofisticada com um background em gradiente, onde as cores vão se alterando, e uma camada de tipografia estática.
Fashion Styling: Diversos efeitos de rolagem são combinados em um único template, baseado em faixas com duas velocidades de rolagem.
Pronto para hipnotizar seu público? Crie um site profissional com Wix agora mesmo!
Por Equipe Wix
