Moçada, no vídeo esqueci de mostrar o suporte, mas, no momento da publicação, funciona nos principais navegadores (Firefox com flag), menos no Safari (AKA "o novo IE"). Outra informação bem legal é que a performance ao se fazer animações semelhantes com JS e CSS, na grande maioria dos casos, fica melhor usando CSS puro (Scroll-driven Animations). 👊 Enquanto o suporte não fica mais próximo de 100%, eis um polyfill que parece bem interessante: github.com/flackr/scroll-timeline
Eu tenho 44 anos, desde 2010 que não trabalho mais com CSS. Sou dos tempos do Maujor e Zen Garden, quando jQuery começou a aparecer. Esse vídeo deixou meu eu do passado emocionado. Que maravilhoso ver isso funcionando. CSS é um labirinto para quem não conhece mas tem toda uma lógica que faz maravilhas. Obrigado pelo vídeo que apareceu despretenciosamente na minha timeline e trouxe essa felicidade. Deu até uma coceirinha e já andei assistindo outros videos seus. Parabéns pelo conteúdo com exemplos tão claros.
Eu que agradeço DEMAIS por suas palavras, Luiz. De verdade. Foi justamente com Maujor e Zen Garden que também iniciei os estudos com CSS. Boas épocas. A gente era feliz e não sabia... :) Nos últimos anos, CSS evoluiu DEMAIS e a tendência é manter esse ritmo. Aproveita que seu eu do passado que gostava de CSS despertou, que vem muito mais coisa boa por aí.
Rapaz, pra fazer landing page ou página pessoal com portfólio isso vai ser uma mão na roda! Do ano passado pra cá o CSS tem lançado várias ferramentas interessantes nativas, teve o :is, o :has, o scroll-behavior smooth, mês passado tbm descobri q agora suporta o “& nesting selector” e agora descubro essa feature incrível de animações em scroll. Sensacional demais!
Muito bom, me lembro que entre 2012 e 2016 eu fazia coisas bobas com css, tipo bordas arredondadas, transparências, media queries etc, e ficava encantado. Hoje vejo que o CSS evoluiu muito, acredito que em um futuro próximo vai deixar de ser um Linguagem de estilo para se tornar uma linguagem de programação, e, se possível que tome o lugar o JavaScript rsrsrsr...
Borda arredondada e transparência já considero luxo. Se eu te falar como isso era feito antigamente, você chora. x) Se CSS deixar de ser uma linguagem de estilo, deixa de ser CSS. Agora, que ela está incorporando elementos de programação, isso está. Vai ter um monte de vídeo no canal com altas novidades de CSS, fica ligado. 🧐
Vídeo muito top!!! Estou rindo a toa com essa atualização do CSS. Não vejo a hora de ver os outros vídeos com as outras propriedades. Show demais!!! Parabéns!!!
@@dpwoficial opa maravilha, como estou aprendendo ainda, eu não sabia que era infinitas... hehe. Fiquei muito feliz por sua reposta.... de qualquer forma, é uma ótima notícia... Já estou no aguardo do seu segundo vídeos de animações... E quando sair o segundo vídeo, comentarei que estarei no aguardo do terceiro heheh..... TMJ Tárcio... sucesso sempre
haha GSAP tem coisas que no CSS nativo (ainda) não tem; vale a pena aprender sim. Mas, com certeza, Scroll-driven Animations vai dispensar bastante o uso dele e de outras libs JS. :)
@@dpwoficial qual a diferença desse pro efeito paralax? Nesse caso o que seria novo seria o comando no css, né? Mas, esse comportamento já havia visto em outros sistemas...
@@DevBraziI Um elemento ser animado pela posição do scroll não tem nada a ver com parallax -- que é a movimentação de "planos" diferentes em velocidades diferentes para criar uma ilusão de profundidade em 2D.
desculpa minha ignorancia... mas, como assim em velocidadas diferentes? parallax seria mais especifico pra mudança de seções? porque ultilizando paralax também tem como ativar animações não é?@@dpwoficial
@@DevBraziI Olha isso, perceba que elementos que estão em planos diferentes se movem em velocidades diferentes. Isso é parallax. codepen.io/WildKING543/pen/zYevmdg Mas perceba que é possível haver animações de scroll sem esse efeito, com cada elemento sendo transicionado de maneira independente, sem correlação, na mesma velocidade etc.
Isso ai é bruxaria, kkk. CSS a cada dia fica mais inacreditável. Uma dúvida: Se eu usar essas propriedades e o browser não suportar, eu imagino que a animação simplesmente não vai acontecer, correto?
@@dpwoficialSó considerei, vou implementar isso em um projeto hoje pra ver como que fica, eu vi no can I use que o animation-timelime no Safari não funciona e no Firefox só com um flag
Caramba que massa. Duvida básica: Ao utilizar esses recursos, não existe o problema de compatibilidade com navegadores mais antigos? O que acontece com a execução desse código em um navegador mais antigo?
Existe esse problema, sim. Navegador que não der suporte, simplesmente, não vai funcionar. Por isso é interessante, ao desenvolver um site/app, ter noção do range de compatibilidade de versões para decidir quais tecnologias usar ou não, se vai ter fallback etc.
Estuda sim, é uma área muito interessante e bastante divertida no front. :) Já vi de relance alguma coisa sobre testar animações com Jasmine ou Mocha; de cabeça, não lembro.
Meu deus... há 15 anos atrás nunca imaginei que o CSS chegaria nesse vídeo. Antigamente tinha que usar imagem dentro de tabela pra fazer borda arredondada, atualmente a cada ano sai cada coisa maravilhosa. Essa é de longe uma das melhores atualizações da década 😍
@@dpwoficial sim hehe comecei a cursar em 2007 e nunca imaginei que viraria profissão, nem PC eu tinha (e fui ter só anos depois). E inclusive eu estudei muito com vocês (DPW). Agradeço por fazerem parte do meu desenvolvimento 🙌
Dá uma olhada em: - developer.mozilla.org/en-US/docs/Web/API/ScrollTimeline - developer.mozilla.org/en-US/docs/Web/API/ViewTimeline Mas, dependendo da necessidade, talvez seja mais prático rumar para alguma lib mesmo.
Realmente uma facilidade enorme, porém ainda não é bem suportado pelos navegadores modernos, acredito que teremos que esperar 1 ano por ai antes de poder utilizar essa feature.
Existem boas libs JS para isso (tipo as que foram mostradas no começo do vídeo), mas faz todo o sentido isso ser serviço de CSS, né, porque é algo relacionado a estilo/visual.
Com todo respeito, mas estão tentando deixar o CSS flexivel igual a uma linguagem de programação e isso faz ele ficar inchado, não vejo a hora que o CSS morrer e os estilos começarem a ser feitos em uma linguagem de programação de verdade, como o JS...
Moçada, no vídeo esqueci de mostrar o suporte, mas, no momento da publicação, funciona nos principais navegadores (Firefox com flag), menos no Safari (AKA "o novo IE").
Outra informação bem legal é que a performance ao se fazer animações semelhantes com JS e CSS, na grande maioria dos casos, fica melhor usando CSS puro (Scroll-driven Animations). 👊
Enquanto o suporte não fica mais próximo de 100%, eis um polyfill que parece bem interessante: github.com/flackr/scroll-timeline
Eu tenho 44 anos, desde 2010 que não trabalho mais com CSS. Sou dos tempos do Maujor e Zen Garden, quando jQuery começou a aparecer.
Esse vídeo deixou meu eu do passado emocionado. Que maravilhoso ver isso funcionando.
CSS é um labirinto para quem não conhece mas tem toda uma lógica que faz maravilhas.
Obrigado pelo vídeo que apareceu despretenciosamente na minha timeline e trouxe essa felicidade. Deu até uma coceirinha e já andei assistindo outros videos seus. Parabéns pelo conteúdo com exemplos tão claros.
Eu que agradeço DEMAIS por suas palavras, Luiz. De verdade.
Foi justamente com Maujor e Zen Garden que também iniciei os estudos com CSS. Boas épocas. A gente era feliz e não sabia... :)
Nos últimos anos, CSS evoluiu DEMAIS e a tendência é manter esse ritmo.
Aproveita que seu eu do passado que gostava de CSS despertou, que vem muito mais coisa boa por aí.
Rapaz, pra fazer landing page ou página pessoal com portfólio isso vai ser uma mão na roda! Do ano passado pra cá o CSS tem lançado várias ferramentas interessantes nativas, teve o :is, o :has, o scroll-behavior smooth, mês passado tbm descobri q agora suporta o “& nesting selector” e agora descubro essa feature incrível de animações em scroll. Sensacional demais!
CSS tá bala!
Show! 👏🏽👏🏽👏🏽👏🏽
\o/
Que show, a maioria dessas animações usamos JS, ainda mais a parte do indicador. Muito bom ver o css renovando….
CSS tá uma coisa linda!
show de bola!
🤙
Massa demais!
o/
sensacional, obrigado!
Eu que agradeço, meu consagrado. Some não. :)
Muito grato!! Like.
Disponha!
♥ Muito Bom! ♥
vlwww
Show, belo vídeo!
Obrigado 👍
Demais!!!! Valeu pela informação!!!
vlwww
Fantástico! Muito Bom!
Muito obrigado! 😃
Que top, muito obrigado!
Disponha!
Muito bom. ❤
vlwww
Muito obrigado pelo vídeo!
Eu que agradeço, Matheus!
Video SENSACIONAL!!! Parabens e muito obrigada sempre por compartilhar!!!
Eu que agradeço suas participações, Jennifer!
Thanks!
Aeee! Brigado eu! o/
Sensacional!!! O conteúdo que tu traz é mto bom!!!
Muito obrigado! 😁
Valeu pelo vídeo! Essa atualização é simplesmente meu sonho
É o nosso, meu amigo. É o nosso. 🥲
Top demais 👍🏻
vlwww
Massa D+ você é um monstro
Ainda chego lá. :)
Obrigado pela participação, Matheus.
Obrigado. Bom conteúdo
Obrigado.
Dica maravilhosa
Que bom que gostou. :)
Que video bom👏🏽
vlw, Bruno!
Tu és o Monstro do CSS! 😂👏
😂👊
Que massa cara, curti demais!!!
vlwww
Top demaaaais! Ótimo vídeo, obrigado pelo conteúdo.
Tamos ae, vlwww
Parabéns!
Obrigado!
Maravilhoso! Muito obrigado pela explicação
Disponha!
Cara que vídeo incrível. Parabéns pelo trabalho!
Eu que agradeço demais pela força, Pedro! \o/
Muito top! Parabéns por trazer esse conteúdo interessantíssimo!
Eu que agradeço pelo comentário, Conrado. 👍
Muito bom, me lembro que entre 2012 e 2016 eu fazia coisas bobas com css, tipo bordas arredondadas, transparências, media queries etc, e ficava encantado. Hoje vejo que o CSS evoluiu muito, acredito que em um futuro próximo vai deixar de ser um Linguagem de estilo para se tornar uma linguagem de programação, e, se possível que tome o lugar o JavaScript rsrsrsr...
Borda arredondada e transparência já considero luxo. Se eu te falar como isso era feito antigamente, você chora. x)
Se CSS deixar de ser uma linguagem de estilo, deixa de ser CSS. Agora, que ela está incorporando elementos de programação, isso está.
Vai ter um monte de vídeo no canal com altas novidades de CSS, fica ligado. 🧐
@@dpwoficial Ah eu me lembro, eu fazia bordas arredondadas com imagens png feitas no FireWorks.
@@charlesmontilla hahaha Então você também é das antiga. x)
@@charlesmontilla agora sim... me senti representado! xD 😅 Parabéns pelo canal ... Excelente conteúdo!
Esse vídeo me ajudou muito
Satisfação em saber. :)
Vídeo muito top!!! Estou rindo a toa com essa atualização do CSS. Não vejo a hora de ver os outros vídeos com as outras propriedades. Show demais!!! Parabéns!!!
CSS tá demaaais
Que vídeo bom, ótima didática, ótimo conteúdo.
Muito obrigado.
muito top
vlwww
que coisa mais incrivel
😁
Que maravilha! Vai facilitar muito o trabalho dos front´s.
Vai mesmo, Camila! o/
Aleluia RS agora sim o negócio vai ficar bom
O que já era bom agora ficou melhor! :)
salvou meu projeto, te amo.
Que conteúdo foda, obrigado por dividir conhecimento, 🤩
Eu que agradeço por você ter visualizado, Anderson. vlwww
Muito bom. Já vou começar a aplicar nos meus projetos.
Graaande Sid!
Será que dá para aplicar em certos projetos por aí...? ;)
cara parabéns pelo conteúdo.
Muito obrigado!
legal demais isso
Né? :D
mano ainda não tinha visto essa. Muito obrigado isso com certeza vai dar uma alavancada nos meus projetos
CSS FTW o/
Rolando lero falando agora: "Amado mestre...." Muito obrigado pela aula. Vc é show!!!!
E o salário, ó... 🤏
Perfeito! Eu adoro CSS vanila pois tenho controle total do código.
Eu também! 👊
Muito interessante , vou até dar uma olhada no seu mini-curso , parabéns.
Olha sim, Eduardo. Se você gostou aqui do Scroll-driven Animations, com certeza, você vai gostar. :)
muito top...... Tárcio.... bem que vc poderia fazer um fazer um novo vídeo com o restante das animações css...
quem concorda dar um like....
Posso fazer sim, mas de que "restante" você tá falando? Animações são infinitas. =P
@@dpwoficial opa maravilha, como estou aprendendo ainda, eu não sabia que era infinitas... hehe. Fiquei muito feliz por sua reposta....
de qualquer forma, é uma ótima notícia... Já estou no aguardo do seu segundo vídeos de animações...
E quando sair o segundo vídeo, comentarei que estarei no aguardo do terceiro heheh..... TMJ Tárcio... sucesso sempre
@@NERDboy Muito obrigado!
Que novidade incrível!! Parabéns pelo conteúdo, muito bom mesmo. Acho que já podemos dizer que o css é uma linguagem de programação, hein! hahahaha
Rapaz... Tô pensando sobre isso há tempos já...
Quando eu chegar a uma conclusão, farei um vídeo com minhas considerações.
@@dpwoficial aguardo por esse vídeo hahaha
Meu Deus, tô morrendo pra aprender GSAP e tu vem com essa 😂 parabéns e obrigado!
haha GSAP tem coisas que no CSS nativo (ainda) não tem; vale a pena aprender sim.
Mas, com certeza, Scroll-driven Animations vai dispensar bastante o uso dele e de outras libs JS. :)
ja ate me inscrevi
Brigadasso! o/
Só lembrando que isso é experimental, segundo o MDN não é suportado no Firefox, Safari nem em nenhum navegador mobile a não ser o Chrome
Coloquei no comentário fixado a questão de crossbrowser. Só lembrando que não ter amplo suporte é diferente de ser experimental.
Muito show, obrigado por compartilhar, já trabalho com desenvolvimento web e vou usar em meus projetos!
Eu que agradeço pela participação, Carlos.
Esqueci de falar no vídeo, mas a performance de scroll-driven animations é bem melhor que quando usa JS. :)
@@dpwoficial Muito bom mesmo, faço animações de scroll com JS e dessa forma nativo no CSS tem várias possibilidades para animar 😁
Excelente vídeo! Pra essa feature ser perfeita, só tendo uma forma de não fazer a animação após o scroll, como nas bibliotecas JS.
Pensei nisso também. Às vezes tem alguma maneira e/ou eles vão implementar no futuro.
Sensacional. Este é o Mister M do CSS que revela os truques que todos querem descobrir como é feito!
🥸
Da pra fazer uns scroll personalizados bem massa viu
Né?
só precisam ficar de olho, alguns navegadores ainda não suportam (firefox, safari) por exemplo..
Firefox com flag funciona; Safari (AKA "o novo IE") ainda não.
Ficou top! poderia fazer mais vídeos sobre animação com scroll-driven animation e explicação dos parametros tbm
Boa! Vamos colocar na fila um vídeo explicando com mais detalhes cada parm.
Obrigado pela sugestão, Marlon.
Cara, te vejo como Kevin Powell, só que brasileiro kkkk@@dpwoficial
@@marlinho206 Que isso, jovi... Ainda chego lá. :D
Isso já tinha já po, mas ótima explicação toop s2
É mesmo? E tinha desde quando?
@@dpwoficial qual a diferença desse pro efeito paralax?
Nesse caso o que seria novo seria o comando no css, né? Mas, esse comportamento já havia visto em outros sistemas...
@@DevBraziI Um elemento ser animado pela posição do scroll não tem nada a ver com parallax -- que é a movimentação de "planos" diferentes em velocidades diferentes para criar uma ilusão de profundidade em 2D.
desculpa minha ignorancia... mas, como assim em velocidadas diferentes? parallax seria mais especifico pra mudança de seções? porque ultilizando paralax também tem como ativar animações não é?@@dpwoficial
@@DevBraziI Olha isso, perceba que elementos que estão em planos diferentes se movem em velocidades diferentes. Isso é parallax.
codepen.io/WildKING543/pen/zYevmdg
Mas perceba que é possível haver animações de scroll sem esse efeito, com cada elemento sendo transicionado de maneira independente, sem correlação, na mesma velocidade etc.
Caiu um cisco no olho agora!
:')
Isso ai é bruxaria, kkk. CSS a cada dia fica mais inacreditável. Uma dúvida: Se eu usar essas propriedades e o browser não suportar, eu imagino que a animação simplesmente não vai acontecer, correto?
"CSS a cada dia fica mais inacreditável"
@@dpwoficialSó considerei, vou implementar isso em um projeto hoje pra ver como que fica, eu vi no can I use que o animation-timelime no Safari não funciona e no Firefox só com um flag
@@DanielRios549Exatamente. Esqueci de colocar o Can I Use no vídeo, mas tá assim mesmo.
sinistro
\m/
Caramba que massa. Duvida básica: Ao utilizar esses recursos, não existe o problema de compatibilidade com navegadores mais antigos? O que acontece com a execução desse código em um navegador mais antigo?
Existe esse problema, sim. Navegador que não der suporte, simplesmente, não vai funcionar.
Por isso é interessante, ao desenvolver um site/app, ter noção do range de compatibilidade de versões para decidir quais tecnologias usar ou não, se vai ter fallback etc.
Vou estudar mais as animações usando css, vou fazer seu mini curso, acho muito bonito tem como fazer teste unitário em animações usando css ?
Estuda sim, é uma área muito interessante e bastante divertida no front. :)
Já vi de relance alguma coisa sobre testar animações com Jasmine ou Mocha; de cabeça, não lembro.
Meu deus... há 15 anos atrás nunca imaginei que o CSS chegaria nesse vídeo. Antigamente tinha que usar imagem dentro de tabela pra fazer borda arredondada, atualmente a cada ano sai cada coisa maravilhosa. Essa é de longe uma das melhores atualizações da década 😍
Ahh, bom ver um dev das antiga aparecendo. ;)
Com certeza, o CSS vai ficar cada vez mais impressionante!
@@dpwoficial sim hehe comecei a cursar em 2007 e nunca imaginei que viraria profissão, nem PC eu tinha (e fui ter só anos depois). E inclusive eu estudei muito com vocês (DPW).
Agradeço por fazerem parte do meu desenvolvimento 🙌
@@AlexLupoz Opa, aí sim! Muito obrigado por estar com a gente todo esse tempo!
@@dpwoficial tmj 🙌
@@AlexLupoz 👊
Eu gostei muito, porem queria uma forma de manter o objeto na tela após finalizar. Creio que da para manipular com js para parar a animação.
Dá uma olhada em:
- developer.mozilla.org/en-US/docs/Web/API/ScrollTimeline
- developer.mozilla.org/en-US/docs/Web/API/ViewTimeline
Mas, dependendo da necessidade, talvez seja mais prático rumar para alguma lib mesmo.
Qual a compabtibilidade com os navegadores atuais?
No momento, funciona nos principais navegadores (Firefox com flag), menos no Safari (AKA "o novo IE").
Tu usa o Visual Studio Code?
Sim, mas, no vídeo, foi direto no CodePen.
Tenho o Firefox atualizado e não vejo os exemplos a funcionar no Codepen, alguma sugestão para mim?
No momento, o suporte para Firefox é somente com flag.
Confira no comentário fixado o link para um polyfill.
Realmente uma facilidade enorme, porém ainda não é bem suportado pelos navegadores modernos, acredito que teremos que esperar 1 ano por ai antes de poder utilizar essa feature.
Depende do projeto. Eu já vou usar agora. :)
Eu tentei fazer um negocio parecido, e única opção que encontrei foi JS, algo que deu muito mais serviço!!!
Existem boas libs JS para isso (tipo as que foram mostradas no começo do vídeo), mas faz todo o sentido isso ser serviço de CSS, né, porque é algo relacionado a estilo/visual.
Ainda não funciona em algumas plataformas pelo que pude observar
Verdade. Ainda não está 100%.
mano que programa voce usa? não e o vs code
Uso também, mas, no vídeo, foi direto no CodePen.
ô mestre, quanto tempo! me diga uma coisa, aquela conversa de pedir para o gerente de projeto lhe enviar e-mails ainda pode? kkkkkkk.
Refresque minha memória... 🤔
@@dpwoficial o seu livro mestre hahah
@@michelsouza3868 hahaha Rapaaaz... O sujeito não conhece o próprio livro. 😅
Não funciona ainda no Safari :(
:(
.c-indicator {
bottom: 0;
animation: scroll 1ms ease-in-out;
animation-timeline: scroll(root);
/* background-color: rgb(156 163 175); */
transform-origin: left;
height: var(--scroll-height);
inset: 0;
position: fixed;
z-index: 20;
}
@keyframes scroll {
from {
scale: 0 1;
}
to {
scale: 1 1;
}
} como consigo fazer funcionar no firefox e outros navegadores aqui so funcionar no chrome
O suporte ainda não é total. No momento, não funciona nativo no FF e Safari (se não me engano).
SHOW... MAS JÁ É NATIVO DO CSS ?
É nativo, pow. A intenção do vídeo é mostrar que é nativo -- embora ainda não tenha 100% em todos os browsers.
Já tá compatível ??
Na data de hoje: Chrome, Opera e Edge OK; Firefox sob flag; o novo IE (Safari) sem suporte.
Safari sempre atrasado
Ahhahaha. Já ia perguntar sobre o safari. Lembro de experiências negativas com clip path.
@@yuriadriel43 Famoso "novo IE".
@@yayaygoat 😅
Com todo respeito, mas estão tentando deixar o CSS flexivel igual a uma linguagem de programação e isso faz ele ficar inchado, não vejo a hora que o CSS morrer e os estilos começarem a ser feitos em uma linguagem de programação de verdade, como o JS...
Que isso, jovi...
Bom mesmo era quando vc precisava colocar uma imagem pra tabela ter bordas arredondadas né okkkk
@@fpskkkk A gente era feliz e não sabia...
Para de ser chato mlk
@@colli3105 então tá, deixa os cara adicionar um milhão de recursos que seriam desnecessários se o CSS fosse acoplado no JS