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.

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