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

Bramus

Temos o prazer de anunciar o lançamento do curso em vídeo "Unleash the Power of Scroll-Driven Animations", com 10 partes para aprender tudo sobre animações de rolagem usando CSS ou JavaScript.

Você pode assistir 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 e animá-la na rolagem. Por isso, as animações de rolagem herdam todos os benefícios que essas APIs oferecem. Isso inclui animações de rolagem aceleradas por hardware que não estão sujeitas a jank quando a linha de execução principal é bloqueada.

As animações de rolagem estão disponíveis no Chrome a partir da versão 115 e são o candidato perfeito para aprimoramento progressivo.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox Technology Preview: supported.
  • Safari: 26.

Source

Assista à série de vídeos ou leia a documentação para saber mais sobre animações de rolagem.

Os episódios

O curso consiste em 10 episódios e é dividido em duas partes principais: uma explicação dos conceitos básicos que compõem as animações de rolagem, seguida de 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 cronograma desmistificados.
  5. Episódio 5: conceitos básicos: pesquisa de cronograma 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: encerramento.

É recomendável assistir aos 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