Temos o orgulho de anunciar o lançamento de "Unleash the Power of Scroll-Driven Animations", um curso em vídeo de 10 partes para aprender tudo sobre animações com rolagem usando CSS ou JavaScript.
Assista a série no YouTube. O primeiro episódio está incorporado aqui.
Animações de rolagem?
Com as animações de rolagem, você pode usar uma animação CSS ou WAAPI existente e animá-la na rolagem. Por isso, as animações movidas por rolagem herdam todos os benefícios dessas APIs. Isso inclui animações movidas por rolagem com aceleração de hardware que não estão sujeitas a instabilidade quando a linha de execução principal é bloqueada.
As animações movidas por rolagem estão disponíveis no Chrome a partir da versão 115 e são a opção perfeita para melhoria progressiva.
Assista a série de vídeos ou leia a documentação para saber mais sobre animações movidas por rolagem.
Os episódios
O curso consiste em 10 episódios e é dividido em duas grandes partes: uma explicação dos conceitos principais que compõem as animações movidas por rolagem, seguidas por algumas aplicações práticas.
- Episódio 1: Introdução.
- Episódio 2: conceitos básicos:
scroll()
eScrollTimeline
. - Episódio 3: conceitos básicos:
view()
eViewTimeline
. - Episódio 4: conceitos básicos: intervalos de linha do tempo sem mistérios.
- Episódio 5: Conceitos básicos: pesquisa de cronogramas e cronogramas nomeados.
- Episódio 6: aplicação prática: adicionar sombras de rolagem a um contêiner de rolagem.
- Episódio 7: aplicação prática: animar elementos em diferentes direções.
- Episódio 8: Aplicação prática: animar modelos 3D e muito mais na rolagem.
- Episódio 9: aplicação prática: detecção de velocidade de rolagem.
- Episódio 10: Outro.
É melhor assistir os episódios em ordem, já que eles se baseiam em demonstrações e técnicas abordadas em episódios anteriores. As demonstrações e ferramentas mostradas em cada episódio estão disponíveis on-line e vinculadas na descrição.
Mais recursos
- Documentação: Animar elementos na rolagem com animações de rolagem
- Demonstrações e ferramentas: scroll-driven-animations.style
- Instalar a extensão do depurador do DevTools