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/
Смотрите видео Animações de scroll com CSS puro (Scroll-driven Animations) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь dpw 24 Октябрь 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 32,509 раз и оно понравилось 2.6 тысяч людям.