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

Bramus

Temos o prazer de anunciar o lançamento de "Libere o poder das animações controladas por rolagem", um curso em vídeo de 10 partes para aprender tudo sobre animações controladas por 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, é possível pegar uma animação CSS ou WAAPI e animá-la na rolagem. Por isso, as animações baseadas em rolagem herdam todos os benefícios dessas APIs. Isso inclui animações aceleradas por hardware e controladas por rolagem que não estão sujeitas a instabilidade quando a linha de execução principal é bloqueada.

As animações controladas por rolagem estão disponíveis no Chrome a partir da versão 115 e são perfeitas para melhoria progressiva.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

Assista a série de vídeos ou leia a documentação para saber mais sobre animações baseadas em 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 controladas por 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 tempo sem mistério.
  5. Episódio 5: conceitos básicos: 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: animar elementos em diferentes direções.
  8. Episódio 8: aplicação prática: anime 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