12 Tendências Essenciais de Animação Scroll-To-View
Elementos de página animados são muito comuns em páginas de destino e sites de inicialização. Mas nem sempre são faladas nos círculos de design porque a ideia de “animar à vista” não é muito abordada.
Eu uso a frase "scroll-to-view" porque parece uma descrição precisa. Basicamente, quando você rola a página, novos elementos animados aparecem.
Não é uma técnica que funciona para todos os sites, mas adiciona um toque agradável a determinados layouts. E organizei alguns dos meus favoritos aqui para mostrar como essas animações de rolagem para visualização funcionam e por que você pode tentar usá-las sozinho.
1. Amanhã Dormir
No Amanhã Dormir site você notará alguns efeitos animados bastante benignos. Eles desvanecem diferentes partes do texto e CTAs em todo o layout.
O que é interessante é como a maioria das imagens e áreas de fundo são totalmente visíveis, mesmo no primeiro pergaminho. Muitos sites usam animações desbotadas para exibir imagens e capturas de tela, mantendo o texto visível.
Essa pequena diferença ajuda a chamar a atenção para o texto à medida que ele se desvanece. Uma ótima maneira de capturar a atenção dos visitantes.
2. Twist
Outra técnica que vejo frequentemente é segmentar a maior parte do conteúdo da página para animações on-scroll.
Por exemplo, o Página inicial do aplicativo Twist inclui vários segmentos de página e blocos de texto que animam in & out of view na rolagem. Estes têm um efeito de desvanecimento muito suave, pelo que são notáveis mas não muito agressivos.
Alguns visitantes podem ficar incomodados com o atraso, mas não acho que seja muito longo. Além disso, apenas anima uma vez, por isso, se você clicar no final da página, todas as animações estarão concluídas.
3. Fio App
Para animações muito mais complexas, confira Fio App lander. Este tem animações em várias partes e até elementos que aparecem em diferentes ângulos.
Algumas das imagens de demonstração de capturas de tela são animadas para cima, enquanto os padrões de texto / BG que acompanham o projeto são exibidos na tela. Esse estilo alternativo é bem único e não é algo que eu vejo com frequência.
No entanto, a página de destino também é incrivelmente simples e não há muito mais aqui para chamar a atenção. Neste caso, animações variadas funcionam bem.
4. DashFlow
De todos esses exemplos eu acho DashFlow usa as técnicas de animação mais comuns.
Este lander anima imagens e texto em vista de uma vez só. É muito simples e usa um layout de coluna única para que todo o conteúdo flua diretamente em um caminho linear.
Nada inerentemente especial sobre esse design além do método muito claro de animar itens no pergaminho. Um ótimo estilo se você tiver um site semelhante e quiser manter as animações simples.
5. Quuu Promover
Quuu Promover mantém as animações no mínimo e só as utiliza nas áreas do CTA.
Não posso dizer se isso aumenta as conversões, mas esse parece ser o objetivo. Quando você carrega a página pela primeira vez, o cabeçalho muito superior é exibido com uma animação de inclinação no CTA.
Ao rolar para baixo, você notará que o resto da página é bastante estático. Mas na parte inferior há um CTA final acima do rodapé que também anima e executa a mesma animação de inclinação.
Vai mostrar que você pode ter efeitos de animação na rolagem que não são exibidos em toda a página.
6. Qonto
A página inicial para Qonto tem uma interessante visão da animação de rolagem para visualização. Ele usa o mesmo tipo de animação em todo o site e anima itens individuais para visualização de lado.
Na maior parte da página, isso inclui seções de ícones com um pequeno gráfico acima de alguns conteúdos que explicam os recursos do aplicativo. Não é muito sutil, mas também não é excessivamente evidente.
Além disso, você pode encontrar alguns outros estilos de animação no cabeçalho junto com algumas imagens BG que aparecem na tela. Esta página é apenas um lindo exemplo do que animação web pode fazer.
7. Caminhada
Para um exemplo de animações sutis, confira Caminhada .
Sua página alterna entre elementos animados e elementos fixos. Mas os efeitos de animação são rápidos para que você não se sinta incomodado em esperar por conteúdo visível.
Essa é a minha preferência por qualquer efeito de rolagem para animação. É sempre uma técnica bonita, mas o timing precisa ser rápido e direto ao ponto. Ninguém quer esperar que o conteúdo seja visto e a Hike entende isso claramente.
8. Projeto Fi
Se existe alguém que conhece o UX, é o Google. E em todos os seus produtos eles têm uma tonelada de landing pages, Projeto Fi sendo um exemplo com algumas animações fantásticas.
Isso só se aplica a ícones e eles não aparecem, mas aparecem na parte inferior da página. Ao rolar, você encontrará ícones que são exibidos para cada pequena seção.
É um efeito bastante sutil, mas acrescenta alguma vida ao design. E é baseado unicamente na posição do espectador na página, então se você rolar para o topo e voltar para baixo, você será saudado pelos mesmos efeitos de animação.
9. Base
o Página base do CRM é um excelente exemplo de animação simples no trabalho. Este site usa efeitos de animação personalizados para mover imagens para cima e para a linha dos olhos do espectador.
Com base no número de páginas de destino que vejo diariamente, isso é muito típico do que espero. Não é realmente uma animação complexa para recriar e também não afeta muito a experiência.
Uma coisa que desejo é que as animações sejam carregadas um pouco mais rápido. Mas além disso eu acho que este é um excelente exemplo de animação de imagens em pergaminho com um layout muito limpo para inicializar.
10. AnyList
Todos os melhores aplicativos móveis têm seus próprios sites para promoção. E os melhores geralmente têm alguns estilos de animações bem legais.
AnyList mistura algumas técnicas diferentes juntas em uma página. Sua imagem de cabeçalho é animada por baixo da área de corte, mas é a única animação em movimento na página.
Tudo o resto desaparece e todos usam um tempo de carregamento muito rápido para a animação. Essas técnicas são usadas em outras partes do site, o que dá uma sensação mais coesa.
11. Ernest
O estilo da página para Ernest é um pouco diferente de outras páginas de destino que eu cobri.
Usa animações de rolagem paralaxe para criar movimento em um layout de página única com seções diferentes.
Eles variam de acordo com a direção em que você está rolando, seja para cima ou para baixo e em que velocidade. Eles também variam com intensidade com base nas diferentes seções da página.
Você pode navegar usando o menu de navegação de ponto lateral e isso rapidamente salta ao redor da página para diferentes áreas. É uma das poucas técnicas que você frequentemente vê nas páginas de paralaxe e certamente ajuda Ernest a se destacar da multidão.
12. TaxiNet
Para ter um vislumbre de animações de página inteira em ação, dê uma olhada no TaxiNet local na rede Internet.
É um miscelânea de efeitos de animação baseados em rolagem vinculados a ícones, texto, imagens e até mesmo estilos de plano de fundo. As cores individuais de fundo da página são animadas com o usuário, definitivamente não é uma técnica típica, mas certamente interessante.
Se você gosta desse estilo, pode aplicar uma abordagem semelhante à sua própria página de destino. Apenas certifique-se de manter as animações rápidas e rápidas porque ninguém quer esperar por suas animações legais para carregar.
Mas, se você fizer isso, esses elementos de rolagem para visualização adicionam um efeito interessante a qualquer página de destino.
