Como fazer uma faixa animada no Elementor usando CSS e JavaScript

[@franciscoricardo8019]

Cara, toma meu like e meu compartilhamento. Que conteúdo animal!!!

[@JornadaTop]

Top demais 🎉

[@scheillaazevedo]

Caso o código não funcione para você, tenta ver se "data-marquee|Seu texto aqui •" foi colado corretamente em "Atributo" ;)

[@marcelordesigner]

Boa!

[@paulo.barreiros]

Show de bola, bem explicado e direto. Consegui fazer aqui de boas! Parabéns e obrigado Marcelo.

[@RoseOliveiraCM]

Maravilha, deu certo. Agora vou tentar fazer a animação andar pra frente rsrs

[@rodrigobranco4472]

Muito top o vídeo!!! DEUS te abençoe!!

[@rafaelnmiguel]

Como personalizo a fonte que ele vai usar? Ou sempre vai pegar do tema e configurações da página?

[@marcelordesigner]

kzbin.info/www/bejne/bqWmlXR4n92Bqtk > Dá uma olhada neste outro vídeo. Nela mostro uma forma atualizada, mais nova e mais leve de fazer e que te possibilitará fazer isso.

[@fkzdesigner]

Mano que conteúdo brabo, já estou seguindo e assistindo mais videos

[@marcelordesigner]

Pra cima 🚀🚀🚀

[@brunoaraujoea]

É possível alterar a direção do texto? Indo da esquerda pra direita.... tutorial mto bom!

[@marcelordesigner]

Sim, na propriedade 'animation', basta você inserir também o valor 'reverse'.

[@JonatasFrias]

Que conteúdo massa! Parabéns, amigo, você é fera demais

[@marcelordesigner]

Valeu amigo tamo junto.

[@ranielealbuquerque1219]

Perfeito!! Já vou começar a maratonar os videos do seu canal.

[@marcelordesigner]

Boaaa

[@franciscosilva5782]

Show. Dica boa é dica compartilhada!

[@josecosta5180]

Ótimo vídeo. Que código eu teria que usar para dá uma leve rotacionada? Tento em vista que está numa "linha reta". Obrigado!

[@marcelordesigner]

Transform rotate

[@felypetizzianifagundes9654]

Olá estou com algumas dúvidas, teria como eu criar essa barra animada e transferir ela por exemplo pra um site/loja que eu já tenho se sim como daria pra fazer

[@marcelordesigner]

Crie direto na loja. Desde que seja em Elementor da para fazer da mesmíssima forma. Agora se for outra plataforma não, teria que reformular tudo.

[@CarluxDesign]

Se na versão mobile ficar lento pessoal só adicionar essa linha a baixo do ( --loop-duration: 30s;) @media (max-width: 780px) {[data-marquee] { --loop-duration: 10s; display: block; }}

[@viverdeecom1967]

me salvou

[@CarluxDesign]

tmj!@@viverdeecom1967

[@Aletorquato_]

no mobail nao funcionou mano. só no desk. sabe como resolver?

[@matheusbramante9781]

e para ficar em looping infinito no celular? sem aquela animação de puxar o texto dnv?

[@renandez.sallatti]

@@Aletorquato_ conseguiu resolver no mobile?

[@rrprodutora]

Cadê o código? Video de 2022, estamos em 2024. Ainda tá disponível?

[@marcelordesigner]

@@rrprodutora sim, dentro do canal do Telegram como eu informo no vídeo.

[@EuBrendaDadalto]

Que vídeo excelente!!! Já me inscrevi no canal, muito bom mesmo!!!

[@marcelordesigner]

Obrigado Brenda! Tamo junto! :D

[@bluehand61]

Entrei na comunidade mas não encontro o código

[@marcelordesigner]

Link na descrição do grupo do Telegram aponta para o Google drive e está lá.

[@JoaoVictor-vp8bo]

Uma dúvida, eu fui tentar uma nova seção no mesmo site, só dupliquei, mas não deu certo, só funciona se for em 1 seção no site todo ? Obrigado!

[@marcelordesigner]

Teria que mudar o código se for usar em mais de um lugar

[@JoaoVictor-vp8bo]

Top demais!

[@belomatech]

Obrigado!!!!

[@camachotv0]

Sempre ajudando meu amigo, tmj

[@marcelordesigner]

Tamo junto amigão! :)

[@tiagokennedysoares1128]

Excelente o vídeo!!! Ajudou muito....e é possível trocar o tipo/modelo de fonte ?

[@marcelordesigner]

Não fiz o teste, mas teoricamente da sim.

[@marcelordesigner]

No CSS só adicionar: font-family: NOMEDAFONTE;

[@pwdsolution]

@@marcelordesigner me ajuda? eu nao to conseguindo, toda vez que tento fica sempre uma fonte esquisita com serif... em que parte eu tenho que colocar esse codigo?

[@wallacesilva7628]

Necessário elementor pró? Não consegui fazer, pede pra usar o elementor pró.

[@marcelordesigner]

Sim mas pode usar o proelements no lugar que funciona do mesmo jeito.

[@wallacesilva7628]

@@marcelordesigner nesse caso meu amigo, sem ser elemento pró. Sem ser não consigo.

[@tesseractdesign5308]

Mas vc não disponibilizou o link do telegram. Esse link que vc postou direciona para a sua página

[@marcelordesigner]

Após cadastrar-se na minha página você receberá o acesso ao grupo do Telegram. E o código está no link do Google drive que está na descrição do grupo do Telegram.

[@luizmezzalira]

tem como fazer com html css e js puro? sem usar o elementor?

[@marcelordesigner]

Até tem mas seria de uma forma completamente diferente.

[@bournoutoficial]

Tenho uma duvida, será que você poderia ajudar? Tem como fazer duas faixas dessa, uma no rodapé e o outro no menu sem eles se anularem quando utiliza cores diferentes?

[@marcelordesigner]

Ter até tem mas precisa modificar o código

[@edensouzza]

Amigo você conseguiu? Se sim como fez?

[@bekoblack]

Cara habilitei o Contêiner fiz tudo certinho e não vai quando atualizo a pagina fica exibindo o texto um em baixo do outro e não fica como seu exemplo

[@marcelordesigner]

Me chama no direct do instagram e manda os prints para eu dar uma olhada: instagram.com/marcelordesigner/

[@bekoblack]

@@marcelordesigner Opa muito obrigado man, vou te mandar lá! Obrigado.

[@EndiMaercio]

O meu deu o mesmo problema, como vc resolveu?

[@DanielSousza]

o meu tbm@@EndiMaercio

[@oryanleite]

Estou com o mesmo problema por aqui, conseguiu resolver?

[@denilsondiniz436]

muito legal

[@luanarodrigues5245]

não consigo entrar no grupo a pagina não redireciona

[@marcelordesigner]

Prontinho, já resolvi! Abre em uma guia anonima e tente novamente, por favor.

[@ruanmota]

E para mudar a fonte como faz?

[@marcelordesigner]

Adicione no CSS a propriedade font-family e coloque a fonte desejada.

[@jrcostasports7534]

@@marcelordesigner COLOCO O NOME DA FONTE OU O CÓDIGO?

[@marcelordesigner]

Veja este outro vídeo mais atualizado: kzbin.info/www/bejne/bqWmlXR4n92Bqtk @@jrcostasports7534

[@joaorabelo4473]

Marcelo, primeiramente parabens pelo trabalho, têm ajudado muito. Mas tem uma questão sobre essa faixa, pelo menos por aqui, se eu colocar um texto mais longo a faixa não reproduz o texto por completo, só o início

[@marcelordesigner]

Veja este vídeo novo que acabei de postar. kzbin.info/www/bejne/bqWmlXR4n92Bqtk

[@jrcostasports7534]

É POSSÍVEL ALTERAR A FONTE?

[@marcelordesigner]

Veja este outro vídeo mais atualizado: kzbin.info/www/bejne/bqWmlXR4n92Bqtk

[@eldervaz5409]

Onde está o código?

[@marcelordesigner]

Cadastre-se no primeiro link da descrição. Em seguida você conseguirá entrar no grupo do Telegram. Lá na descrição do grupo do Telegram está um link para o Google Drive onde está o código.

[@eldervaz5409]

​​@@marcelordesignerobrigadoooo 😉

[@eldervaz5409]

@@marcelordesigner apenas uma questão. Da para mudar a cor da caixa? Vi que a cor do texto muda, mas e a caixa?

[@patrickmacedo7899]

Excelente !!!

[@MichelFardin]

Dá pra fazer essa mesma animação só que ao invés de passar o texto, passar logomarcas em SVG?

[@marcelordesigner]

Não testei, mas teoricamente dá. É só substituir o texto pelo código do SVG. Vou fazer um teste e se funcionar em breve eu gravo um vídeo ensinando.

[@talitasuzumura6569]

Não tem o código na descrição 🥲

[@marcelordesigner]

Não é na descrição do vídeo. É na descrição do meu grupo do Telegram. Para entrar no grupo você clica no primeiro link na descrição deste vídeo.

[@marcelordesigner]

Depois que estiver no grupo do Telegram, lá na descrição tem o link de um Google Drive onde você pode acessar o código.

[@droka2635]

LIBERA ESSES LINK NA DESCRIÇÃO, ATRASOU O LADO AQ!!

[@marcelordesigner]

@@droka2635 A GENTE DA A MÃO E VOCÊ QUER O BRAÇO, ATRASARIA MAIS SE EU NÃO TIVESSE ENSINADO.

[@wilson_18]

Já é o segundo vídeo que promete códigos no grupo do telegram, eu sempre vou lá conferir mas nunca encontro esses códigos. Eles foram deletados, Marcelo?

[@marcelordesigner]

Álvaro eles estão no Google drive. O link do Google drive está na descrição do grupo, dá uma olhadinha lá.

[@matheuspaiva179]

Como deixo a faixa mais fina?

[@marcelordesigner]

Diminui o padding

[@sololiveira4965]

Não achei o código no telegran

[@marcelordesigner]

Na descrição do grupo tem um link para o Google drive. Está lá.

[@mesonmateus]

ja tentei de tudo quanto é jeito e não funciona, fica o texto abaixo do outro várias vezes

[@gabimarchesan]

oi estou com o mesmo erro, como resolveu?

[@hudsonvilela1869]

@@gabimarchesan Também estou com o mesmo erro

[@margaridasantos6320]

top!!!

[@marcelordesigner]

Boraaaa

[@FR-TERAPEUTAS]

Meu último cod não deu certo

[@marcelordesigner]

Confere tudo novamente. Qualquer pequeno erro pode fazer o restante não funcionar.

[@ricardooliveira2984]

@@marcelordesigner já tentei umas 5 vezes, as duas primeiras linhas ficam diferentes da suas, aparece um x em vermelho

[@marcelordesigner]

@@ricardooliveira2984 revisa e confere tudo de novo.

[@marcosv4513]

Pra mim não funcionou, fiz exatamente como o passo a passo. Ficou tudo bugado.

[@marcelordesigner]

@@marcosv4513 então fez errado. Reconfira o código.

[@hudsonvilela1869]

Lá tem o código HTML e CSS e não tem o javascript mano

[@marcelordesigner]

@@hudsonvilela1869 está lá sim amigo

[@bronxforex]

Poderia disponibilizar os códigos, me inscrevi no telegram, mas não encontrei os códigos! Ótimos conteúdos

[@marcelordesigner]

Obrigado amigo. Os códigos estão na descrição do grupo em um link do Google drive, vê lá

[@bronxforex]

@@marcelordesigner boa! Conteúdo diferenciado ein! Entrega muito mais que muita gente a👏🏼👏🏼👏🏼

[@bronxforex]

Da pra fazer essa animação com imagens também ?

[@marcelordesigner]

@@bronxforex dá mas é um pouco diferente. Mais para frente eu gravo um vídeo mostrando como.

[@lucassilvabahia110]

nao está nao

[@GloriaBachevaIvanchova]

hola, donde puedo encontrar el archivo CSS?

[@marcelordesigner]

Cadastre-se no primeiro link na descrição e depois entre no grupo do Telegram. Na descrição do grupo você terá acesso ao link do Google drive com os arquivos

[@gcbicca]

Pra mim não deu, os textos ficaram um em baixo do outro e sem animação.

[@marcelordesigner]

@@gcbicca então está com o código incorreto ou com alguma configuração de minimização de CSS no seu site. Revise os códigos e configurações.

[@OGabrielmaker]

[@williammodas2239]

Não funcionou aqui

[@marcelordesigner]

Revisa o código. Se qualquer pequeno trecho estiver incorreto, não vai funcionar mesmo.

[@jonathaadelino1222]

Infelizmente só faz no pró

[@marcelordesigner]

Sim.

[@marcelordesigner]

Se quiser pode usar o Proelements para substituir o Elementor Pro. Ele é gratuito e funciona da mesma forma: proelements.org/

[@despertandoacentelha3298]

af tem que ter elementor pro

[@marcelordesigner]

Se não tiver o elementor Pro, alternativamente pode usar o ProElements que funcionará do mesmo jeito e é gratuito. Pode ser baixado neste link: proelements.org/