Animações de scroll com CSS puro (Scroll-driven Animations)

Animações de scroll com CSS puro! Isso é o que Scroll-driven Animations faz com poucas linhas de código.

Neste vídeo, trazemos uma das últimas tendências e inovações no mundo #css com uma revolucionária tecnologia CSS que está prestes a mudar o jogo: as chamadas Scroll-driven Animations. Se você é um entusiasta de web design, interfaces e UX, desenvolvedor ou apenas alguém interessado em tecnologia, este vídeo é para você.

Fazer animações baseadas na rolagem da página ou posição de um elemento é algo relativamente comum em front end. Mas, até então, era preciso usar JavaScript, seja de maneira nativa ou recorrendo a bibliotecas destinadas a esse fim.

Isso muda com a nova tecnologia CSS que está chegando, Scroll-driven animations, que permite fazer animações de scroll com CSS puro. E o melhor: com pouquíssimas linhas de código.

Assista para conhecer e entender as bases de Scroll-Driven Animation. Explicaremos como essa tecnologia funciona e o impacto que ela pode ter no engajamento do usuário. Você entenderá como o simples ato de rolar a página pode ser transformado em uma experiência visual envolvente.

Como é de costume aqui no dpw, também vamos a exemplos práticos, apresentando casos reais de aplicação de animações de scroll CSS.

Vamos desbravar o mundo das Scroll Driven Animations, mostrando como essa tecnologia pode moldar o futuro do web design e UX. Portanto, não esqueça de se inscrever, dar um like e ativar o sininho para não perder nenhuma atualização.

📜 CodePen: Exemplo 1
https://codepen.io/desenvolvweb/pen/z...

📜 CodePen: Exemplo 2
https://codepen.io/desenvolvweb/pen/K...

📜 CodePen: Exemplo 3
https://codepen.io/desenvolvweb/pen/r...

🌐 Mais exemplos de animações nativas com CSS
https://scroll-driven-animations.style/

🌐 Ferrenta para ajuste fino da timeline (animation-range)
https://scroll-driven-animations.styl...

🌐 Especificação W3C Scroll-driven Animations
https://www.w3.org/TR/scroll-animatio...

==========

📷 Equipamentos usados para gravar este vídeo
Sony Alpha a6400: https://amzn.to/3LZ9Zkv
Cartão 128GB Extreme PRO SDXC: https://amzn.to/3rqVPRg
Tripé Weifeng WT6734: https://amzn.to/3LYWUb4

==========

Assine o canal! http://bit.ly/dpw-youtube

Facebook:   / desenvolvweb  
Instagram:   / desenvolvweb  
Twitter:   / desenvolvweb  

Conheça o blog desenvolvimento para web: https://desenvolvimentoparaweb.com/