Vídeo muito bom.. e eu assistindo 2 anos depois.... precisamos de mais vídeos assim, são poucos canais que trazem conteúdos desse tipo.... faz uma serie de 'animação', serie de 'propriedades css pouco conhecidas' etc.... eu mesmo não sey nada sobre keyframe... muito grato por compartilhar conhecimento...
Mas que coisa magnifica, um tutorial facil que explica muita coisa do css animation que por acaso estava procurando e só encontrava explicaçoes complexas
Eu achei que era impossível aprender javascript sendo mais designer na época até achar origamid! Vale cada centavo! Melhor curso!! Te dá BASE e ensina a fazer tudo do zero!
Que aula incrível, explicação excelente... Ainda de quebra disponibilizou a ferramenta que dá pra testar vários códigos e treinar bastante... Não sei como ainda tem pessoas que dão deslike , aff
Caraca mano bom demais, as vezes dou uma brincada com js e teria pego pelo getElementById e alterado pelo style pra BLUE, não conhecia esse toggle que já fez tudo, obrigado pela dica e aula. Parabéns ✌🏼
Fiz a animação de entrada de um site ontem mesmo, este vídeo teria ajudado bastante. Pelo menos agora estou preparado para a próxima vez que precisar animar.
Vou te falar que esse ferramenta que vc criou (o das mudanças 'on the fly') facilita muito ! Foi a primeira coisa que notei durante o video e estava me perguntando pq o pessoal que faz os tutoriais nao fazem dessa forma. Muito bom !
Ótimo vídeo, André! Sou assinante do plano vitalício e adoro seu conteúdo/ metodologia. Queria deixar aqui uma indicação pro próximo curso, depois do redesign do Bikcraft, que seria um curso de Next.js. Teu curso de React tá pagando mto boleto meu e com o mercado abraçando o Next.js acho que seria uma boa pedida. Grande abraço, mestre!
@@JoaoVitor-gm8xo Depende muito do teu objetivo. Se tiver mirando em freelancer recomendo fazer o de WordPress. Caso esteja em busca de um estágio ou vaga de júnior, recomendo que estude mais JavaScript e depois faça o curso de React. Os dois tem na Origamid e são excelentes. Faz uma conta no GitHub, vai colocando projetos lá, com um readme bem escrito, que na hora que você conseguir uma entrevista vai fazer a diferença. Boa sorte!
Vídeo apareceu nos meus sugeridos do youtube, muito interessante. Estudo CSS há um tempo e não tinha visto nada nesse sentido até agora, bem maneiro. +1 inscrito.
Construí a parte do site com bootstrap, não sei porque ação de animar somente é oculta/desoculta. Também se usar este código css, não acontece nada: #modal.animar{ opacity: 0; transform: translateX(-20px); } Tem que deixar assim: #modal.animar{ opacity: 0; transform: translateX(-20px); }
como eu farei pra colocar a frase da barra de anuncio movimenta usando isso > animation: marquee 15s linear infinite; ? eu não estou conseguindo colocar no tema do meu site, parece que precisa alterar em outras seções.
muito bom, mas será que da para fazer um slide carrossel onde que ele só vai em uma única direção no banner com as setas e radios para controle e que quando chegar no final das imagens ele ir na mesma direção recomeçando sem voltar para traz.
Muito obrigado pelo vídeo, ajudou bastante!! Quando eu recarrego a página, ele não fica no topo, fica abaixo, eu fiz baseado na sua explicação, teria como resolver isso?
Mano que incrível, vc é super rápido nisso e eu pensando que demora uns 3 dias rsrs. Ensina como dividir essa tela como está no video, sou novo nesse ramo
Cara, excelente vídeo!! Mas tenho uma dúvida, como que eu faria pra esse campo de login só aparecer quando eu clicar no link. Pois ele aparece quando atualizo a pagina. Mas parabéns pela excelente aula.
Eu fiquei em dúvida em uma coisa, vc não deu um querySelector nos elementos em js antes pra poder usa-los... mas mesmo assim funcionou, poderia explicar pq??
Se o elemento tiver um ID, automaticamente o browser define esse ID como uma propriedade do window. Sendo assim você pode acessar ele direto, só usando o nome. Para manter o código recomendo sempre fazer a seleção com querySelector ou getElementById, mas nesse caso como era só para um exemplo, não tinha necessidade.
Qualquer parte visual é feita pelo CSS. Se você por exemplo tiver uma função de JavaScript que anime de 0 até 1 a opacidade do elemento, ainda sim a opacidade está sendo definida pelo CSS e não pelo JavaScript. O ideal é dessa forma ai mesmo que mostrei.
não tem necessidade de fazer pelo JS, adicione uma classe de acordo com determinado evento (de click, por exemplo) no elemento que tu quer fazer a animação. Nessa classe, tu faz sua animação
Vídeo muito bom.. e eu assistindo 2 anos depois....
precisamos de mais vídeos assim, são poucos canais que trazem conteúdos desse tipo....
faz uma serie de 'animação', serie de 'propriedades css pouco conhecidas' etc.... eu mesmo não sey nada sobre keyframe...
muito grato por compartilhar conhecimento...
Comecei o curso dele esses dias. Quero seguir como front e esse cara vai me colocar na direção certa. Esse cara é o pai dos Fronts
Soy de España y he aprendido mucho con este vídeo!!!! Un saludo!
Mostrou o importante, não enrolou e ajudou muito. Com esse conhecimento, é possível eu tentar me aprofundar mais no assunto, obrigado.
Mas que coisa magnifica, um tutorial facil que explica muita coisa do css animation que por acaso estava procurando e só encontrava explicaçoes complexas
Igual aq
Eu achei que era impossível aprender javascript sendo mais designer na época até achar origamid! Vale cada centavo! Melhor curso!! Te dá BASE e ensina a fazer tudo do zero!
É o melhor curso pra front end, nenhum supera
Parabéns André !! Muito bom, melhor curso que ja comprei!!!!!!!
Vou falar uma coisa: Nunca aprendi tanto Html, css e javascript quanto estou aprendendo agora nos cursos da origamid ! O cara se garante no que faz.
Eu sou inscrito na Alura, porém o curso de JS da origamid é bem mais detalhado.
@@lectermen quanto que custa os cursos?
Nice vídeo professor André, podemos esperar um módulo de animação em css? 👀
Queria também
@@Origamid em um dia de curso já peguei bem flex e float, Tmj, lança mais curso kkkkk
Likeeeeeee cravadoooo pra não sair mais! Origamid é top demais, tá louco, se tu quer aprender tá no lugar certo!
Você é um professor incrível
Que aula incrível, explicação excelente... Ainda de quebra disponibilizou a ferramenta que dá pra testar vários códigos e treinar bastante... Não sei como ainda tem pessoas que dão deslike , aff
André , tu é bom pra caralh0
Com certeza vou comprar seu curso, parabéns pelo seu vídeo.
Ótimo! Eu tava com um problema aqui no trampo que resolvi com o alternate-reverse do vídeo. Valeu!
Excelente vídeo aula, parabéns pela ferramenta magnifica...Se não fosse apósentado iria com certeza participar do seu curso... Sua didática é nota 10!
Parabéns sensacional de maisssssssssssssssssssssssssssss
Sou uma pessoa simples, nem vi o video e já estou deixando meu like. André, você é nota 10000!!!
Caraca mano bom demais, as vezes dou uma brincada com js e teria pego pelo getElementById e alterado pelo style pra BLUE, não conhecia esse toggle que já fez tudo, obrigado pela dica e aula. Parabéns ✌🏼
O curso dele é muito bom, vale apena conhecer se vc não conhece.
wooow animation css com a origamid = Sucesso!
Andre é mto fera, melhor conteúdo front da internet
Entrei só para dar o like maroto, depois assisto tudo. Abração!
Fiz a animação de entrada de um site ontem mesmo, este vídeo teria ajudado bastante. Pelo menos agora estou preparado para a próxima vez que precisar animar.
Eu precisava dessa aula, obrigado professor
Qualquer coisa que vocês publicarem eu vou curtir!
Fantástico, parece mágica.
Rapaz, esse vídeo vale ouro! Mais um inscrito e parabéns pelo canal * ^*
veyy eu vou ter da um beijo , namoral vc me salvou !!!!!!
Vou te falar que esse ferramenta que vc criou (o das mudanças 'on the fly') facilita muito !
Foi a primeira coisa que notei durante o video e estava me perguntando pq o pessoal que faz os tutoriais nao fazem dessa forma.
Muito bom !
sensacional e a ferramenta tbm é muito interessante. Ficou muito legal em monitor ultrawide.
Ótimo vídeo, André! Sou assinante do plano vitalício e adoro seu conteúdo/ metodologia. Queria deixar aqui uma indicação pro próximo curso, depois do redesign do Bikcraft, que seria um curso de Next.js. Teu curso de React tá pagando mto boleto meu e com o mercado abraçando o Next.js acho que seria uma boa pedida. Grande abraço, mestre!
Iae cara blz ? Estou terminando o curso de web design completo agr, você tem dicas para conseguir trabalhos ?
@@JoaoVitor-gm8xo Depende muito do teu objetivo. Se tiver mirando em freelancer recomendo fazer o de WordPress. Caso esteja em busca de um estágio ou vaga de júnior, recomendo que estude mais JavaScript e depois faça o curso de React. Os dois tem na Origamid e são excelentes. Faz uma conta no GitHub, vai colocando projetos lá, com um readme bem escrito, que na hora que você conseguir uma entrevista vai fazer a diferença. Boa sorte!
Like dado, conteúdo com quem realmente entende.
sou seu Fã!!!!!
Top! Impossível não aprender.
Bruxão do front end!! Muito like.
muito da hora, aula top
show !!excelent professor !!!
Ótima explicação.
Parabéns, bem explicado.
Vídeo apareceu nos meus sugeridos do youtube, muito interessante. Estudo CSS há um tempo e não tinha visto nada nesse sentido até agora, bem maneiro. +1 inscrito.
O like ja veio antes mesmo da estreia
Sensacional
Parabéns 👏👏👏👏
Excelente vídeo...
Me ajudou muito tmj
Aulão
Parabéns amigo
Sensacional.
Muito bom patrão, obrigado por essa aula incrível! 👏🧑💻
Massa demais, obrigado pelo conteúdo!
Cara, vc eh uma lenda, parabens pelos seus videos, conteudo top, explicacao top, quando crescer quero ser igual a vc na programacao kkkkkkkkkkkkk
Sem dúvida, material top !!!
Muito bom! As explicações estão ficando muito melhores e de fácil entendimento. Parabéns!
Excelente vídeo parabéns , estava com dúvida sobre essa parte de permanecer o estilo da animação, esse vídeo esclareceu essa e outra dúvidas .
Obrigado por todo seu conhecimento André! Melhor conteúdo não existe.
Excelente conteúdo! 👏
Top demais! Não é a toa que irei comprar o seu curso!
Video muito bom e didático
Professor, a partir de 5:35 como você fez o JavaScript reconhecer o botão ativar e o modal sem usar .getElementById( ) ou .querySelector( ) ???
Construí a parte do site com bootstrap, não sei porque ação de animar somente é oculta/desoculta.
Também se usar este código css, não acontece nada:
#modal.animar{
opacity: 0;
transform: translateX(-20px);
}
Tem que deixar assim:
#modal.animar{
opacity: 0;
transform: translateX(-20px);
}
Como sempre, um conteúdo de muita qualidade e explicação clara e objetiva ... Parabéns André pelo conteúdo! :)
O meu da erro.. Diz "Uncaught ReferenceError: ativar is not defined".. Como conserto?
Muito boa a aula, parabéns André.
Faz mais conteúdo assim, ótima didática. 🚀👏
Já laikei porque sei que vai ser bom
já chamei no like pois sei o nivel do conteudo .
Massa André!!!!
Seus vídeos são bons demais! Obrigado por postar!
Muito bom
Perfeito!
prof...cadê o curso de E-Commerce?? aprendo muito com seus conteudos.
Já tem
Já tem, é o curso WooCommerce como CMS
como eu farei pra colocar a frase da barra de anuncio movimenta usando isso > animation: marquee 15s linear infinite; ? eu não estou conseguindo colocar no tema do meu site, parece que precisa alterar em outras seções.
muito bom, mas será que da para fazer um slide carrossel onde que ele só vai em uma única direção no banner com as setas e radios para controle e que quando chegar no final das imagens ele ir na mesma direção recomeçando sem voltar para traz.
Já deixei meu like, show de bola.
Quando vai rolar um curso de typescript com reactjs?
ferramenta top
Boa cara
Qual iMac ou MacBook que vocês da Origamid usam? E onde compraram?
Ganhou +1 inscrito!
q aula, slk parabens
Fala André, tem chance de você trazer algum curso de NextJS no futuro? Likee!
Muito bom, like
shooooow!
Como faz pra as mudanças aparecerem imediatamente no navegador enquanto digito?
Beleza!
Muito obrigado pelo vídeo, ajudou bastante!! Quando eu recarrego a página, ele não fica no topo, fica abaixo, eu fiz baseado na sua explicação, teria como resolver isso?
cria o canal de assinaturas de membros da Origamid muito top seus videos!!!! ++++++++++++++++++++++++++++++++++++
Curso novo saindo do forno ...s2...
Like 🔵
que foda, mais um inscrito
Mano que incrível, vc é super rápido nisso e eu pensando que demora uns 3 dias rsrs. Ensina como dividir essa tela como está no video, sou novo nesse ramo
Na barra de endereço do navegador no video mostra o site de desenvolvimento.
Ensina como faz um loop de like pra eu aplicar em seus vídeos!
como coloca esse auto save? eu coloco o code e nao aparece no site
show
Posso animar uma foto (jpg ou png) usando estes procedimentos???
Cara, excelente vídeo!! Mas tenho uma dúvida, como que eu faria pra esse campo de login só aparecer quando eu clicar no link. Pois ele aparece quando atualizo a pagina. Mas parabéns pela excelente aula.
Tira a classe animar dele no HTML, assim ele começa sem a animação.
Thx, sir
Eu fiquei em dúvida em uma coisa, vc não deu um querySelector nos elementos em js antes pra poder usa-los... mas mesmo assim funcionou, poderia explicar pq??
Se o elemento tiver um ID, automaticamente o browser define esse ID como uma propriedade do window. Sendo assim você pode acessar ele direto, só usando o nome. Para manter o código recomendo sempre fazer a seleção com querySelector ou getElementById, mas nesse caso como era só para um exemplo, não tinha necessidade.
Fala André, tem como fazer via JS? se puder, é mais complicado? qual é mais recomendado via CSS ou JS?
Qualquer parte visual é feita pelo CSS. Se você por exemplo tiver uma função de JavaScript que anime de 0 até 1 a opacidade do elemento, ainda sim a opacidade está sendo definida pelo CSS e não pelo JavaScript. O ideal é dessa forma ai mesmo que mostrei.
não tem necessidade de fazer pelo JS, adicione uma classe de acordo com determinado evento (de click, por exemplo) no elemento que tu quer fazer a animação. Nessa classe, tu faz sua animação