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 de rolagem usando CSS ou JavaScript.

Assista a série no YouTube. O primeiro episódio está incorporado aqui.

Talvez este recurso não esteja disponível na sua região.

Animações de rolagem?

Com animações de rolagem, você pode pegar uma animação CSS ou WAAPI já existente e animá-la na rolagem. Por isso, as animações de rolagem herdam todos os benefícios dessas APIs. Isso inclui animações de rolagem aceleradas por hardware que não estão sujeitas a instabilidade quando a linha de execução principal é bloqueada.

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

Compatibilidade com navegadores

  • 115
  • 115
  • x

Origem

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

Os episódios

O curso tem 10 episódios e está dividido em duas grandes partes: uma explicação dos principais conceitos que compõem as animações de rolagem e 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 principais: intervalos de linha do tempo desmistificados.
  5. Episódio 5: Conceitos principais: pesquisa na linha do tempo e linhas do tempo nomeadas.
  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: anime elementos em diferentes direções.
  8. Episódio 8: aplicação prática: anime modelos 3D e mais na rolagem (em inglês).
  9. Episódio 9: aplicação prática: detecção de velocidade de rolagem.
  10. Episódio 10: Encerramento.

Os episódios são mais assistidos na ordem, à medida que se baseiam em demonstrações e técnicas abordadas nos episódios anteriores. As demonstrações e ferramentas mostradas em cada episódio estão disponíveis on-line e têm links na descrição.

Mais recursos