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/
Watch video Animações de scroll com CSS puro (Scroll-driven Animations) online without registration, duration hours minute second in high quality. This video was added by user dpw 24 October 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 32,509 once and liked it 2.6 thousand people.