Aprenda como obter o efeito de rolagem parallax movendo cada camada em uma velocidade diferente conforme você rola.
Nos últimos anos, a paralaxe se tornou uma tendência em sites e aplicativos móveis. O efeito de rolagem paralaxe é uma técnica em que o plano de fundo de um site rola em um ritmo mais lento do que o primeiro plano. O objetivo é conseguir uma ilusão de profundidade dentro da cena 2d de um site.
Neste artigo, aprenderemos como construir um efeito de rolagem de paralaxe usando o gatilho Chain no ProtoPie.
O que você vai aprender
- Entenda como funciona a paralaxe
- Crie um contêiner de rolagem para fazer uma visualização rolável
- Use corrente para definir velocidades diferentes para elementos de fundo
- No final, você será capaz de fazer algo assim!
No final, você será capaz de fazer algo assim!
Entenda como funciona a parallax
Antes de entrarmos no protótipo, vamos entender como a rolagem de paralaxe funciona e estruturar nossas camadas para otimizar o efeito de rolagem de parallax.
Como funciona?
Para criar um efeito de parallax, cada elemento está se movendo em um ritmo e tempo diferentes. É assim que alcançamos a ilusão de profundidade, embora estejamos rolando em 2D.
A regra prática move menos os objetos “mais distantes”, como parece no mundo real.
Estrutura da camada de protótipo
Na rolagem parallax, você precisa colocar cada elemento em camadas diferentes para ajustar suas propriedades individualmente. Dê uma olhada no arquivo de ativo e veja como os ativos de imagem são colocados em camadas separadas.
Instruções passo a passo
1. Crie um contêiner de rolagem para fazer uma visualização rolável
Precisamos de um contêiner de rolagem para acionar os movimentos de paralaxe de outras camadas. Vamos adicionar um contêiner de rolagem em tela cheia ( 1440 * 900 ) .
Arraste as camadas Outros e Frente para o contêiner de rolagem. Queremos que essas 2 camadas se movam junto com o contêiner de rolagem.
Usando o Chain Trigger
A Cadeia é um gatilho condicional que nos permite alterar a propriedade de uma camada com base na alteração da propriedade de outra camada.
Por exemplo, o tamanho da caixa vermelha muda conforme arrastamos a caixa verde para cima e para baixo na imagem abaixo. No ProtoPie, podemos fazer isso porque a escala da caixa vermelha está “encadeada” na posição Y da caixa verde.
Neste tutorial de rolagem em paralaxe, iremos “encadear” as posições dos elementos à posição de rolagem do contêiner de rolagem.
1. Adicione um gatilho de cadeia ao contêiner de rolagem.
2. Lembra-se da regra da paralaxe? O objeto mais distante deve se mover menos enquanto você rola.
No arquivo de ativos, a camada Frontal é a mais próxima e a camada Sky é a mais distante. Como a camada frontal está dentro do contêiner de rolagem, não precisamos adicionar uma resposta em cadeia à camada frontal .
Selecione na segunda camada e, em seguida, adicione uma resposta de movimento abaixo do acionador de cadeia. Primeiro, vamos configurar o intervalo de rolagem de 0 a 900 . Em seguida, defina o intervalo Y de 525 a -225 .
O que estes números significam? Isso significa que o usuário rola de 0 a 900 pixels; a segunda camada se moverá 750px - que é a distância entre a posição inicial (525) e a posição final da camada (-225) .
💡 Dicas: sinta-se à vontade para brincar com a posição inicial e final da camada. No entanto, para obter um bom efeito de rolagem de paralaxe, certifique-se de que ele esteja abaixo do intervalo de rolagem. A camada não deve se mover junto com a rolagem; em vez disso, deve se arrastar um pouco.
3. Usando o mesmo método para definir as respostas de movimento para as outras camadas.
Opticamente, quanto mais distante a camada, menor é a distância do movimento. Defina a distância de movimento da camada para um valor decrescente.
É isso!
Agora você pode clicar em visualizar e ver como seu efeito de rolagem Parallax no protótipo. Brinque com ele e curta a animação sutil que você acabou de fazer.
Neste artigo do tutorial, você aprendeu sobre paralaxe, como obter o efeito de paralaxe, como usar o gatilho em cadeia e como configurar uma resposta para ele.
Mais importante, agora você pode criar um efeito Parallax Scrolling no ProtoPie ; isso é demais!
Este tutorial de caso de uso ajudou você? Participe desta pesquisa de 1 minuto para nos ajudar a melhorar nosso conteúdo educacional.
Os comentários são de responsabilidade exclusiva de seus autores e não representam a opinião deste site.
Adicionar comentário