Apresentamos o recurso "Descubra o poder das animações orientadas por rolagem"

Bramus

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.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: not supported.

Source

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.

  1. Episódio 1: Introdução.
  2. Episódio 2: conceitos básicos: scroll() e ScrollTimeline.
  3. Episódio 3: conceitos básicos: view() e ViewTimeline.
  4. Episódio 4: conceitos básicos: intervalos de linha do tempo sem mistérios.
  5. Episódio 5: Conceitos básicos: pesquisa de cronogramas e cronogramas nomeados.
  6. Episódio 6: aplicação prática: adicionar sombras de rolagem a um contêiner de rolagem.
  7. Episódio 7: aplicação prática: animar elementos em diferentes direções.
  8. Episódio 8: Aplicação prática: animar modelos 3D e muito mais na rolagem.
  9. Episódio 9: aplicação prática: detecção de velocidade de rolagem.
  10. 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