Animações de scroll com CSS puro (Scroll-driven Animations)
Рет қаралды 30,146
Күн бұрын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/
@luizndo 8 ай бұрын
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.
@dpwoficial 8 ай бұрын
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í.
@DiogoLScarmagnani 8 ай бұрын
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!
@dpwoficial 8 ай бұрын
CSS tá bala!
@dpwoficial 8 ай бұрын
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
@ramonoliveira_dev 8 ай бұрын
Show! 👏🏽👏🏽👏🏽👏🏽
@dpwoficial 8 ай бұрын
\o/
@gustavolins7664 8 ай бұрын
Tu és o Monstro do CSS! 😂👏
@dpwoficial 8 ай бұрын
😂👊
@GustavoSantos-cy4du 8 ай бұрын
Que show, a maioria dessas animações usamos JS, ainda mais a parte do indicador. Muito bom ver o css renovando….
@dpwoficial 8 ай бұрын
CSS tá uma coisa linda!
@caiosantosvargas 8 ай бұрын
Aleluia RS agora sim o negócio vai ficar bom
@dpwoficial 8 ай бұрын
O que já era bom agora ficou melhor! :)
@gome_ss 8 ай бұрын
Valeu pelo vídeo! Essa atualização é simplesmente meu sonho
@dpwoficial 8 ай бұрын
É o nosso, meu amigo. É o nosso. 🥲
@salvimateus 8 ай бұрын
sensacional, obrigado!
@dpwoficial 8 ай бұрын
Eu que agradeço, meu consagrado. Some não. :)
@realdrumfan 8 ай бұрын
show de bola!
@dpwoficial 8 ай бұрын
🤙
@brunopereira8325 8 ай бұрын
Que video bom👏🏽
@dpwoficial 8 ай бұрын
vlw, Bruno!
@ericnevesr 8 ай бұрын
Que massa cara, curti demais!!!
@dpwoficial 8 ай бұрын
vlwww
@thia_haze 8 ай бұрын
Massa demais!
@dpwoficial 8 ай бұрын
o/
@MegaLeoDOM 8 ай бұрын
Thanks!
@dpwoficial 8 ай бұрын
Aeee! Brigado eu! o/
@MarcosPelaezwd 8 ай бұрын
Fantástico! Muito Bom!
@dpwoficial 8 ай бұрын
Muito obrigado! 😃
@TrinoAlexandre 8 ай бұрын
Demais!!!! Valeu pela informação!!!
@dpwoficial 8 ай бұрын
vlwww
@Matheus.Stopinski 8 ай бұрын
Rolando lero falando agora: "Amado mestre...." Muito obrigado pela aula. Vc é show!!!!
@dpwoficial 8 ай бұрын
E o salário, ó... 🤏
@matheusmczvieira 8 ай бұрын
Massa D+ você é um monstro
@dpwoficial 8 ай бұрын
Ainda chego lá. :) Obrigado pela participação, Matheus.
@camila.mergulhao 8 ай бұрын
Que maravilha! Vai facilitar muito o trabalho dos front´s.
@dpwoficial 8 ай бұрын
Vai mesmo, Camila! o/
@mksvncs 8 ай бұрын
Perfeito! Eu adoro CSS vanila pois tenho controle total do código.
@dpwoficial 8 ай бұрын
Eu também! 👊
@fbezsw 4 ай бұрын
Maravilhoso! Muito obrigado pela explicação
@dpwoficial 4 ай бұрын
Disponha!
@NERDboy 8 ай бұрын
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....
@dpwoficial 8 ай бұрын
Posso fazer sim, mas de que "restante" você tá falando? Animações são infinitas. =P
@NERDboy 8 ай бұрын
@@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
@dpwoficial 8 ай бұрын
@@NERDboy Muito obrigado!
@Viniciusgnux 8 ай бұрын
cara parabéns pelo conteúdo.
@dpwoficial 8 ай бұрын
Muito obrigado!
@eduardophelipe1502 8 ай бұрын
Muito interessante , vou até dar uma olhada no seu mini-curso , parabéns.
@dpwoficial 8 ай бұрын
Olha sim, Eduardo. Se você gostou aqui do Scroll-driven Animations, com certeza, você vai gostar. :)
@uicodeoficial 8 ай бұрын
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
@dpwoficial 8 ай бұрын
Rapaz... Tô pensando sobre isso há tempos já... Quando eu chegar a uma conclusão, farei um vídeo com minhas considerações.
@uicodeoficial 8 ай бұрын
@@dpwoficial aguardo por esse vídeo hahaha
@conradotravassos 8 ай бұрын
Muito top! Parabéns por trazer esse conteúdo interessantíssimo!
@dpwoficial 8 ай бұрын
Eu que agradeço pelo comentário, Conrado. 👍
@xpeugames 8 ай бұрын
♥ Muito Bom! ♥
@dpwoficial 8 ай бұрын
vlwww
@charlesmontilla 8 ай бұрын
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...
@dpwoficial 8 ай бұрын
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. 🧐
@charlesmontilla 8 ай бұрын
@@dpwoficial Ah eu me lembro, eu fazia bordas arredondadas com imagens png feitas no FireWorks.
@dpwoficial 8 ай бұрын
@@charlesmontilla hahaha Então você também é das antiga. x)
@rnfdesing 5 ай бұрын
@@charlesmontilla agora sim... me senti representado! xD 😅 Parabéns pelo canal ... Excelente conteúdo!
@felipesantos0687 8 ай бұрын
Show, belo vídeo!
@dpwoficial 8 ай бұрын
Obrigado 👍
@MarcosOliveira-pn8xm 8 ай бұрын
Que top, muito obrigado!
@dpwoficial 8 ай бұрын
Disponha!
@matheuscanuto6306 8 ай бұрын
Muito obrigado pelo vídeo!
@dpwoficial 8 ай бұрын
Eu que agradeço, Matheus!
@marcuspeixoto1089 8 ай бұрын
Muito grato!! Like.
@dpwoficial 8 ай бұрын
Disponha!
@lucascavalcante8411 8 ай бұрын
Top demais 👍🏻
@dpwoficial 8 ай бұрын
vlwww
@thisanx 8 ай бұрын
Sensacional!!! O conteúdo que tu traz é mto bom!!!
@dpwoficial 8 ай бұрын
Muito obrigado! 😁
@gutobarbieri 2 ай бұрын
Muito bom. ❤
@dpwoficial 2 ай бұрын
vlwww
@jennifermagpantay7933 8 ай бұрын
Video SENSACIONAL!!! Parabens e muito obrigada sempre por compartilhar!!!
@dpwoficial 8 ай бұрын
Eu que agradeço suas participações, Jennifer!
@nelclassico 5 ай бұрын
Que vídeo bom, ótima didática, ótimo conteúdo.
@dpwoficial 5 ай бұрын
Muito obrigado.
@hana_bi_taikai 2 ай бұрын
muito top
@dpwoficial 2 ай бұрын
vlwww
@filipealexandre2353 5 ай бұрын
Top demaaaais! Ótimo vídeo, obrigado pelo conteúdo.
@dpwoficial 5 ай бұрын
Tamos ae, vlwww
@sidneydeus2541 8 ай бұрын
Muito bom. Já vou começar a aplicar nos meus projetos.
@dpwoficial 8 ай бұрын
Graaande Sid! Será que dá para aplicar em certos projetos por aí...? ;)
@ThallesVFS 5 ай бұрын
Parabéns!
@dpwoficial 5 ай бұрын
Obrigado!
@heraclitothiago 8 ай бұрын
Dica maravilhosa
@dpwoficial 8 ай бұрын
Que bom que gostou. :)
@gilsonconceicao5201 8 ай бұрын
Obrigado. Bom conteúdo
@dpwoficial 8 ай бұрын
Obrigado.
@rnunes260684 4 ай бұрын
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 4 ай бұрын
CSS tá demaaais
@gabrielmarcolinosilva7268 8 ай бұрын
que coisa mais incrivel
@dpwoficial 8 ай бұрын
😁
@pedrodaniluz4511 7 ай бұрын
Cara que vídeo incrível. Parabéns pelo trabalho!
@dpwoficial 7 ай бұрын
Eu que agradeço demais pela força, Pedro! \o/
@zmurilo19 8 ай бұрын
legal demais isso
@dpwoficial 8 ай бұрын
Né? :D
@andersonfernando5288 8 ай бұрын
Que conteúdo foda, obrigado por dividir conhecimento, 🤩
@dpwoficial 8 ай бұрын
Eu que agradeço por você ter visualizado, Anderson. vlwww
@murilofujita 2 ай бұрын
Sensacional. Este é o Mister M do CSS que revela os truques que todos querem descobrir como é feito!
@dpwoficial 2 ай бұрын
🥸
@nihnandra 5 ай бұрын
Esse vídeo me ajudou muito
@dpwoficial 5 ай бұрын
Satisfação em saber. :)
@toirder 3 ай бұрын
salvou meu projeto, te amo.
@dpwoficial 2 ай бұрын
@albertlima-md5bc 3 ай бұрын
mano ainda não tinha visto essa. Muito obrigado isso com certeza vai dar uma alavancada nos meus projetos
@dpwoficial 3 ай бұрын
CSS FTW o/
@CarlosXavier_ 8 ай бұрын
Muito show, obrigado por compartilhar, já trabalho com desenvolvimento web e vou usar em meus projetos!
@dpwoficial 8 ай бұрын
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. :)
@CarlosXavier_ 8 ай бұрын
@@dpwoficial Muito bom mesmo, faço animações de scroll com JS e dessa forma nativo no CSS tem várias possibilidades para animar 😁
@UniversoFascinante21 8 ай бұрын
ja ate me inscrevi
@dpwoficial 8 ай бұрын
Brigadasso! o/
@dotjorgedev 8 ай бұрын
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
@dpwoficial 8 ай бұрын
Coloquei no comentário fixado a questão de crossbrowser. Só lembrando que não ter amplo suporte é diferente de ser experimental.
@fxduarte 4 ай бұрын
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.
@dpwoficial 4 ай бұрын
Pensei nisso também. Às vezes tem alguma maneira e/ou eles vão implementar no futuro.
@brunoarrm 8 ай бұрын
Meu Deus, tô morrendo pra aprender GSAP e tu vem com essa 😂 parabéns e obrigado!
@dpwoficial 8 ай бұрын
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. :)
@marciomrb 8 ай бұрын
só precisam ficar de olho, alguns navegadores ainda não suportam (firefox, safari) por exemplo..
@dpwoficial 8 ай бұрын
Firefox com flag funciona; Safari (AKA "o novo IE") ainda não.
@digitandoalgo7926 8 ай бұрын
Da pra fazer uns scroll personalizados bem massa viu
@dpwoficial 8 ай бұрын
Né?
@gustavoquinalha4029 6 ай бұрын
sinistro
@dpwoficial 6 ай бұрын
\m/
7 ай бұрын
Caiu um cisco no olho agora!
@dpwoficial 7 ай бұрын
:')
@DanielRios549 8 ай бұрын
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?
@dpwoficial 8 ай бұрын
"CSS a cada dia fica mais inacreditável"
@DanielRios549 8 ай бұрын
@@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
@dpwoficial 8 ай бұрын
@@DanielRios549Exatamente. Esqueci de colocar o Can I Use no vídeo, mas tá assim mesmo.
@DevBraziI 8 ай бұрын
Isso já tinha já po, mas ótima explicação toop s2
@dpwoficial 8 ай бұрын
É mesmo? E tinha desde quando?
@DevBraziI 8 ай бұрын
@@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...
@dpwoficial 8 ай бұрын
@@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.
@DevBraziI 8 ай бұрын
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
@dpwoficial 8 ай бұрын
@@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.
@marlinho206 7 ай бұрын
Ficou top! poderia fazer mais vídeos sobre animação com scroll-driven animation e explicação dos parametros tbm
@dpwoficial 7 ай бұрын
Boa! Vamos colocar na fila um vídeo explicando com mais detalhes cada parm. Obrigado pela sugestão, Marlon.
@marlinho206 5 ай бұрын
Cara, te vejo como Kevin Powell, só que brasileiro kkkk@@dpwoficial
@dpwoficial 4 ай бұрын
@@marlinho206 Que isso, jovi... Ainda chego lá. :D
@AlexLupoz 8 ай бұрын
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 8 ай бұрын
Ahh, bom ver um dev das antiga aparecendo. ;) Com certeza, o CSS vai ficar cada vez mais impressionante!
@AlexLupoz 8 ай бұрын
@@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 🙌
@dpwoficial 8 ай бұрын
@@AlexLupoz Opa, aí sim! Muito obrigado por estar com a gente todo esse tempo!
@AlexLupoz 8 ай бұрын
@@dpwoficial tmj 🙌
@dpwoficial 8 ай бұрын
@@AlexLupoz 👊
@arozendojr 8 ай бұрын
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 ?
@dpwoficial 8 ай бұрын
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.
@joegrandao 8 ай бұрын
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?
@dpwoficial 8 ай бұрын
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.
@wikanobeat Күн бұрын
Qual software você usou?
@douglasmatos2134 5 ай бұрын
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.
@dpwoficial 5 ай бұрын
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.
@ph......0 8 ай бұрын
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.
@dpwoficial 8 ай бұрын
Depende do projeto. Eu já vou usar agora. :)
@Flotita5 8 ай бұрын
Eu tentei fazer um negocio parecido, e única opção que encontrei foi JS, algo que deu muito mais serviço!!!
@dpwoficial 8 ай бұрын
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.
@mhcostapimenta 8 ай бұрын
Qual a compabtibilidade com os navegadores atuais?
@dpwoficial 8 ай бұрын
No momento, funciona nos principais navegadores (Firefox com flag), menos no Safari (AKA "o novo IE").
@franciscowillam2411 8 ай бұрын
Tu usa o Visual Studio Code?
@dpwoficial 8 ай бұрын
Sim, mas, no vídeo, foi direto no CodePen.
@JTSS69 8 ай бұрын
Tenho o Firefox atualizado e não vejo os exemplos a funcionar no Codepen, alguma sugestão para mim?
@dpwoficial 8 ай бұрын
No momento, o suporte para Firefox é somente com flag. Confira no comentário fixado o link para um polyfill.
@nakamacomtibia 4 ай бұрын
mano que programa voce usa? não e o vs code
@dpwoficial 3 ай бұрын
Uso também, mas, no vídeo, foi direto no CodePen.
@VidaDeEctomorfoOficial 5 ай бұрын
Ainda não funciona em algumas plataformas pelo que pude observar
@dpwoficial 5 ай бұрын
Verdade. Ainda não está 100%.
@michelsouza3868 8 ай бұрын
ô mestre, quanto tempo! me diga uma coisa, aquela conversa de pedir para o gerente de projeto lhe enviar e-mails ainda pode? kkkkkkk.
@dpwoficial 8 ай бұрын
Refresque minha memória... 🤔
@michelsouza3868 8 ай бұрын
@@dpwoficial o seu livro mestre hahah
@dpwoficial 8 ай бұрын
@@michelsouza3868 hahaha Rapaaaz... O sujeito não conhece o próprio livro. 😅
@fabioverlaine7274 8 ай бұрын
SHOW... MAS JÁ É NATIVO DO CSS ?
@dpwoficial 8 ай бұрын
É nativo, pow. A intenção do vídeo é mostrar que é nativo -- embora ainda não tenha 100% em todos os browsers.
@denisbessa-tx1dv 7 ай бұрын
Não funciona ainda no Safari :(
@dpwoficial 7 ай бұрын
:(
@fabiobrasileiroo 3 ай бұрын
.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
@dpwoficial 3 ай бұрын
O suporte ainda não é total. No momento, não funciona nativo no FF e Safari (se não me engano).
@patricksantos6800 8 ай бұрын
Já tá compatível ??
@dpwoficial 8 ай бұрын
Na data de hoje: Chrome, Opera e Edge OK; Firefox sob flag; o novo IE (Safari) sem suporte.
@yuriadriel43 8 ай бұрын
Safari sempre atrasado
@yayaygoat 8 ай бұрын
Ahhahaha. Já ia perguntar sobre o safari. Lembro de experiências negativas com clip path.
@dpwoficial 8 ай бұрын
@@yuriadriel43 Famoso "novo IE".
@dpwoficial 8 ай бұрын
@@yayaygoat 😅
@tiagoamaral8823 8 ай бұрын
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...
@dpwoficial 8 ай бұрын
Que isso, jovi...
@fpskkkk 8 ай бұрын
Bom mesmo era quando vc precisava colocar uma imagem pra tabela ter bordas arredondadas né okkkk
@dpwoficial 8 ай бұрын
@@fpskkkk A gente era feliz e não sabia...
@colli3105 8 ай бұрын
Para de ser chato mlk
@tiagoamaral8823 8 ай бұрын
@@colli3105 então tá, deixa os cara adicionar um milhão de recursos que seriam desnecessários se o CSS fosse acoplado no JS
Online Tutorials
Рет қаралды 1,9 МЛН