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
codepen.io/desenvolvweb/pen/z...
📜 CodePen: Exemplo 2
codepen.io/desenvolvweb/pen/K...
📜 CodePen: Exemplo 3
codepen.io/desenvolvweb/pen/r...
🌐 Mais exemplos de animações nativas com CSS
scroll-driven-animations.style/
🌐 Ferrenta para ajuste fino da timeline (animation-range)
scroll-driven-animations.styl...
🌐 Especificação W3C Scroll-driven Animations
www.w3.org/TR/scroll-animatio...
==========
📷 Equipamentos usados para gravar este vídeo
- Sony Alpha a6400: amzn.to/3LZ9Zkv
- Cartão 128GB Extreme PRO SDXC: amzn.to/3rqVPRg
- Tripé Weifeng WT6734: amzn.to/3LYWUb4
==========
Assine o canal! bit.ly/dpw-youtube
- Facebook: / desenvolvweb
- Instagram: / desenvolvweb
- Twitter: / desenvolvweb
Conheça o blog desenvolvimento para web: desenvolvimentoparaweb.com/