Deixe-me mostrar como criar letreiros infinitos com a biblioteca de animação JavaScript GSAP. Esse é um padrão UX comum que tenho certeza que você já viu em muitos sites.
Tutoriais GSAP anteriores
No passado, mostrei como usar o GSAP para criar diferentes efeitos, como efeitos de cursor flutuante, um efeito de animação de carregamento de página e uma galeria de imagens arrastável.
O processo
Você certamente pode criar letreiros somente CSS animando-os transform propriedade. No entanto, neste tutorial, discutiremos como construí-los usando GSAP, para que possamos aproveitar todos os extras desta biblioteca.
Em sua forma mais simples, tudo o que precisamos para criar uma marquise horizontal e vertical com GSAP é usar o horizontalLoop() e verticalLoop() funções auxiliares.
No nosso caso, vamos focar apenas em letreiros horizontais, pois eles são mais populares.
Marquee horizontal básico
Na implementação mais direta, considere a seguinte demonstração, onde animamos infinitamente alguns logotipos:
O JavaScript necessário é o seguinte:
1 |
window.addEventListener("load", function () { |
2 |
horizontalLoop(".marquee-item", { |
3 |
repeat: -1, |
4 |
paddingRight: 40, |
5 |
speed: 0.5, |
6 |
});
|
7 |
});
|
Vamos prestar atenção ao paddingRight propriedade de configuração. Usamos um valor que corresponde ao espaço (40px) entre os itens do letreiro. Fazemos isso para evitar a sobreposição entre o primeiro e o último elemento e dar a eles um espaço que corresponde ao espaço dos outros elementos. Dito isso, se você colocar paddingRight: 0você obterá este resultado:
Tenda Horizontal Com Paradas
Neste caso, cada item de marquee contém o mesmo texto e uma animação Lottie. Para evitar o inchaço do nosso HTML, geramos os itens de marquee usando JavaScript. Claro, em um cenário do mundo real, também podemos colocar atributos ARIA para melhorar a acessibilidade da página.
Cada vez que passamos o mouse sobre um item, o letreiro pausa. Para conseguir isso, usamos o pause() e play() métodos que estão disponíveis para uma linha do tempo GSAP. Role para baixo até o rodapé nesta demonstração para ver o efeito:
Marquees horizontais com direções invertidas
Vamos agora trabalhar em um exemplo mais complicado; considere a demonstração a seguir, onde temos duas marquises horizontais que correm em direções opostas:
A sua direção é determinada pelo valor do data-reversed Atributo HTML.
O que torna esta demonstração interessante é que usamos o GSAP matchmedia() método para aplicar diferentes paddingRight e speed valores de propriedade dependendo do tamanho da tela. Certifique-se de testá-lo redimensionando a janela do seu navegador.
Reproduzir letreiros horizontais quando estiver visível
Na demonstração a seguir, colocamos o plugin ScrollTrigger do GSAP em execução e reproduzimos os marquees somente quando eles estão em exibição. Dessa forma, fazemos o melhor para garantir que os visitantes do site vejam todos os nossos itens animados.
Novamente, use o inspetor do navegador para testar como as animações param quando o letreiro relacionado sai da janela de visualização.
Controle deslizante tipo letreiro horizontal
Neste exemplo, nosso letreiro se comporta como um controle deslizante. Ele reproduz automaticamente e há setas para navegar para frente e para trás. Além disso, usamos o GSAP’s Arrastável plugin para habilitar a funcionalidade de arrastar passando o draggable: true propriedade de configuração para o horizontalLoop() função.
Como bônus, o letreiro para sempre que passamos o mouse sobre uma imagem; nesse momento, sua sobreposição correspondente aparece com uma animação de slide.
Mais uma vez, redimensione a janela do navegador para testar como o layout muda
Conclusão
Esperamos que você tenha gostado das tendas GSAP que construímos e adquirido conhecimento e inspiração suficientes para começar a construir as suas!
Por último, mas não menos importante, adicionei todas as demos deste tutorial a uma CodePen Collection. Não deixe de conferir e dar um pouco de amor!
Como sempre, muito obrigado pela leitura!
[ad_2]
