Make a SUPER TRENDY SMOOTH INFINITE MARQUEE with text or image - - Elementor Tutorial

[@andreaegli]

Do you think the marquee will be a continued trend in 2023? i for one love it and will be using it also, let me know if you encounter issues with the code and/or if you have questions. To be fair, it was a lot if information thrown at you. i forgot to mention, you can combine images and text in one marquee if you want.

[@brandedright]

I came back to this video to ask if you know how to make the marquee animation move like a wave hahahaha 😆

[@ricardovaldivia9828]

Great video. i only have an issue. added two more elements (images) and now one overlaps the last one

[@gcpho]

Andrea! Your tutorials are a breath of fresh air! Topical and valuable content. To the point. Where have you been this whole time !?? Thank you for all of your amazing content so far! G🙏

[@andreaegli]

Gavin! Hehe, thank you so much!!!! I don’t know, I sometimes wonder that too 😅 you’re welcome & let me know if there’s anything you would like to see on the channel in the future 🤓

[@Berxy]

I can see you have a great vision, I already know I am going to start to binge watching you. Amazing video, wish this was the first result.

[@andreaegli]

Thank you so much!🤓

[@SapphirinePlays]

you're a lifesave Andrea!! You got a new subscriber!

[@BeckyBrower-r1o]

You are INCREDIBLE!!!! Totally my new fav channel

[@andreaegli]

excitement is what we like in this channel 😅 thank you so much, Becky!

[@molly_1-0_0-1]

Thank you so much! ❤ I've spent so much time trying to figure this out. But it never worked.. And then I find your videos and I LOVE IT! New Subscriber here 😉

[@visualaddictionx]

Great tutorial and the only one that worked for my needs. Thanks a ton!

[@andreaegli]

You are very welcome!

[@Seemenowhere]

Thank youu I searched everywhere but only your solution worked and it was very easy to understand

[@andreaegli]

You are very welcome 🤗 so happy to hear that!!!

[@corinagrether]

Hi Andrea. Thank you for this beautiful tutorial. I have a question, is it possible to slow down the speed?

[@andreaegli]

Hey Corina! Yes, adjust the s value on this: animation: scroll 30s linear infinite reverse;

[@corinagrether]

🥰Thank youuu! didn't saw the line@@andreaegli

[@romeldiaz7796]

It's 2024 already and clients still dig the marquee. Thanks for this Andrea ! I do have a question which was not mentioned in the tutorial - what if the client wants the text stroked as initial style then becomes solid white (or any other color) when hovered? Tried doing it but was able to ONLY make the text stroked but does nothing when hovered. Please, if you can shed light why it doesn't work. Appreciate you.

[@ayush.onfinance]

I am looking for this functionality and surfing web, chatpgt and lots of blogs but didnot get right answer but you got it compltely right awesome work keep it up

[@andreaegli]

☺️ thank you and you are very welcome, Ayush!

[@joelroblesmunoz7576]

this is simply next level

[@andreaegli]

Thank you, Joel 🤩

[@hilaavinadav8045]

The only script that worked for me :) Tnx a lot!

[@andreaegli]

Lovely! You are very welcome!

[@ramonsanchez5541]

Andrea Thanks so much for your tutorial and help ... very clear and awesome !!!

[@andreaegli]

You are very welcome 🤗 so happy to hear that!

[@agw421]

Subbing cuz you gave us the code in an external link! Thanks for this

[@andreaegli]

Thanks for the sub! 😁

[@ClareWalter-q5y]

Love this tutorial. Is there any way to have the logos not scrolling on from a blank screen? As in, they already fill the space horizontally but continue to scroll?

[@andreaegli]

Not sure I understand what you mean, do you have a link to your example?

[@waelajam9627]

Thank you very much I have tried this, but it does not work in live, it only works in the editor. What is the problem in your opinion?

[@andreaegli]

You are very welcome! Should work in the editor as there's no JS in the code, haven't heard anyone having this issue before. I use it on this website ohwow.club/ and it works in both the editor and live website.

[@waelajam9627]

@@andreaegli Yes, this is true. The problem is on all Custom CSS on the site. I do not understand what is happening

[@batibrahim]

so lovely

[@ProspectVik]

Super Helpful, Thanks Andrea

[@andreaegli]

You are very welcome!

[@nicolasriedel1927]

Great and clear! Thanks Andre!!

[@V3ryH1gh]

absolutely perfect examples!

[@andreaegli]

Thank you 😊

[@JoshuaG109]

Thank you for saving my life :D

[@andreaegli]

Anytime 😅

[@jeffdp23]

Hi Andrea, what a wonderful tutorial! Do you know if it's possible to change the color of the arrow only? I would love to have the font on a grey color and then the arrows with a different color

[@apenasbraga]

The translateX() function moves an element along the horizontal X-axis. but at the moment of the transition the text moves back a few pixels, making it appear that the animation is not infinitely fluid, it is as if it were a small bug. i using the same code you, applied to the wordpress elementor.

[@andreaegli]

What modifications have you made to the code? did you change the gap size?

[@lucaseatp]

great tutorial, thanks andrea, your channel is awesome

[@deduice]

I love this. Thank you, Andrea 😇

[@andreaegli]

Always welcome, Ahmed! And Thank you for watching 🤓

[@janhancz]

Very nice solution. Thank you for that!:)

[@andreaegli]

You're welcome!

[@Devi-gn2cs]

Hi Andrea thank you for this tutorial! Question: if there are several marquees on my page, I can only have the same style for all. If I apply any change of color, speed etc to any of their individual CSS box, the change will either affect all of them or not work at all. Do you know a workaround?

[@andreaegli]

Yes, you just need to change the classes, have different classes for each marquee 😉. Take it step by step not to miss anything, otherwise things will not work anymore

[@jeniferpg3518]

Hi, thank you so much for this! How can I change the type for one I just upload to WordPress?

[@andreaegli]

Hey, Jenifer! You are very welcome 🙏 yes, you upload the font to elementor custom fonts. Make sure that you add ‘serif’ ‘sans-serif’ etc as the font requires. If it’s a google font you can easily copy the css code from there google fonts website 😉

[@jimrocky]

I learn a lot from this.

[@andreaegli]

Thank you, Jim! So happy that the video was helpful 🤓

[@Sirhlande]

That's awesome ! if you can add speed effect on scroll that's would be perfection !

[@andreaegli]

I’m working on something like that 😉

[@cesarflores6158]

Justo el tutorial que buscaba y explicado mu y claro, gracias!

[@andreaegli]

Estoy muy contenta de escuchar eso, Cesar! De nada 🤓

[@nolderoos7997]

Would it be possible to have this marquee adapt to the user scrolling? So for example; when user scrolls it ramps up in speed and smoothly slows down to normal speed again?

[@andreaegli]

Yes, you just need to add some JS

[@nolderoos7997]

I've been at it for 5 hours now :) can't get it to have a smooth ramp up and down. Anyways, absolutely loved this tutorial, amazing work keep it up!@@andreaegli

[@andreaegli]

wow! you really want to makeit work!! ok, tell you what, send me a reference of exactly how you want it to look/behave and I'll swee if I can help...@@nolderoos7997

[@nolderoos7997]

First of all, thank you soo much for the offer! I've tried and tried but it simply isn't working. The example / reference that I'm using is from Hagi's Barbershop. You can find them on google (can't post the URL). Thank you so much!@@andreaegli

[@Axel1665]

Hello Andrea, great Job! Do you know how to make the text stroke without needing to hover;

[@andreaegli]

hey Axel! Thank you🤓 Yes, copy from .marquee:hover this part of the code and move it up to .marquee -webkit-text-stroke: 1.5px #fff; text-stroke: 1.5px #fff; -webkit-text-fill-color: transparent; text-fill-color: transparent; ...and then delete .marquee:hover completely. Let me know if you need more help ;)

[@Axel1665]

@@andreaegli Thank you very much for your quick respond! It worked!

[@andreaegli]

@@Axel1665 anytime, Axel!

[@marlinx78]

Fantastic video thanks a lot for your tips, can I ask you how to make text gradient color please !

[@kennethb4784]

Hi Andrea, i love your video's. They really help me! I do have a question because when on tablet, when i swipe/scroll left or right, on the whole page i see the white space on the sides. I hope you understand and could help me out here. Again, nice videos and keep it going👍

[@andreaegli]

hey Kenneth! thank you so much! Have you managed to make it work? i'm not sure I understand, maybe send me a screenshot by email if you still need help

[@bhaskargowda-3955]

Much respect and love from India ma'am The quality of of content u have 🤌🏻🫶🏻 Wish u ll have more success ahead :p

[@andreaegli]

Hey & thank you so much!

[@myonlineclan]

Awesome amazing cool and easy, thanks for sharing

[@Peebals]

Hi Andrea. I'm Vishal. I really loved your content. I learnt lot of new things thanks specially 🙃 keep it

[@andreaegli]

Hey Vishal! 👋 happy to hear that, will do 🤓

[@Peebals]

@@andreaegli 🙃

[@wasiqkhan886]

Thanks for this amazing video

[@andreaegli]

My pleasure

[@thetapics]

Hi Andrea, thanks for this awesome tutorial! Glad I found your channel! I encountered an issue with the last marquee with the images doesn't have an infinite marquee and stops at the end then continues to the 1st image again. The text marquee thought works perfect! Is there anything I am missing?

[@rosesamaras]

I love your videos!! For real the last 7 days I am following your lessons, building my first website in elementor!! Thank you so much, Can you helo with how I can put another picture in hover and a button as they have in the website you showcase? Thank you!!

[@andreaegli]

You're very welcome and so happy to hear that my videos are so helpful! That is way too complicated to explain in words

[@medienmacherbwg9220]

hi, thank you but i have a problem with marquee. it doesn't repeat and after finishing all photos, there is empty . How can I again the photos repeating|?

[@andreaegli]

Welcome! Can you paste the exact HTML structure you are using? I think I know what the problem is, you have omitted smth but i want to make sure that that's what it is...

[@medienmacherbwg9220]

@@andreaegli Thank you for your answer: **********Html*********** **************css************* .marquee { width: 2850.62px; max-width: 100%; height: 50px; overflow-x: hidden; position: relative; color: #333; white-space: nowrap; counter-reset: slide; display: flex; flex-shrink: 0; } .track { position: absolute; white-space: nowrap; will-change: transform; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 1rem)); } }

[@medienmacherbwg9220]

Can you help me? 🙏

[@andreaegli]

@@medienmacherbwg9220 yes, if you send me the exact HTML sgtrucutre you used. I think you ommited smth but i want to see your code first so, please send it to me if you want my help

[@seangallagher4519]

I couldn't help but notice that your marquee completely breaks when you changed the font-size? You kind of quickly jump to the next part of your video but for those for us needing font-size change - how do we fix this?

[@andreaegli]

Hey, Sean! Add this right at the bottom of the code: @media only screen and (min-width: 360px) { .marquee__group span { font-size: 6.5vw; } } Adjust the font size as needed...I hope this helps!

[@seangallagher4519]

@andreaegli thanks so much for the reply! I'll try it. I did add in the css gap var from Ryan Mulligan, so changing the gap variable is a single edit. Or is your code modified so that's not a good idea?

[@SerenaKoeber]

Hi! I tried the image slider on my website but the image sizing and the gaps and the infinite thing are not working. The text marquee was perfect but the image one does not work

[@andreaegli]

Make sure to duplicate the images

[@youruniquewebsite]

You are amazing thanks for the tips! Subscribed!

[@andreaegli]

Efharisto poli, Giannis!

[@youruniquewebsite]

@@andreaegli Parakalo ! 😂

[@ob7349]

Hi. Can you tell, how to do without jumping?

[@andreaegli]

There shouldn't be any jumping, there must be something missing from your code. Do you mind sharing the code so I can have a look, you can email me...

[@LukeFair-n1r]

Hey Andrea, Thank you so much

[@sdfsfsfd437]

Thanks a lot. Very nice code.

[@andreaegli]

You’re welcome ☺️

[@vishalsolanki5807]

loved it thanks 👌

[@challengeaccepted5459]

can we do this in vertical and little bit slant?

[@andreaegli]

yes!

[@mariazakariya8604]

Thank you for this informative video . Im struggling to change the font size . Its not changing . I know how deal with css i tried many times but the font size is not changed in any way . Please help

[@almadigital4571]

life saver video

[@andreaegli]

Happy to hear that it helped that much 😊

[@rene.navarro2]

Hello.. I'm from Brazil, loved your video, it helped me a lot! Could you help me, I'm trying to apply the effect of having two Marquee bands, one normal and the second one below moving in the opposite direction but more blurred.. But the second one doesn't have a continuous effect.. it moves, then stops and starts again.. it seems like there's some interference from the first one.. it doesn't look like your video, with all the marquees passing smoothly.. could you help me?

[@Rodkidesings]

thanks for the tut, question. what shortcode you use to comment and uncomment the css code lines?

[@chiefofdesign]

Muito obrigado 😍

[@andreaegli]

With pleasure 😉

[@medvin5370]

great idea for cardss didi.....!!!!!!!!

[@auto-diciplime237]

Thank you very much 🙏🙏🙏

[@andreaegli]

You are very welcome 🙏

[@diegoetc]

Where do you control which font is being used?

[@andreaegli]

Under .marquee__group span you will see a property called font-family, that's where you add your desired font

[@zona2official]

hi this vid is super easy to follow but I have issue to scale my items in marquee three. I have pngs with high resolution around 1024x1024 and in marquee they are too big. how can I make them smaller in css code? resize? thanks

[@thesuperahul]

can you make it marquee tutorial for shopify???

[@andreaegli]

Hey, most likely not because I have never worked with liquid

[@SusmoyPaul-vv9zx]

can i get it on elementor free version?

[@andreaegli]

You can but you need to use a code snippet plugin

[@snagz4124]

The code just appeared on my screen it didn’t work for me

[@andreaegli]

You probably forgot to close a tag

[@snagz4124]

@@andreaegli I just copy and pasted like you said and the code just appears on my screen I am probably doing something wrong just not sure what

[@jonhanlan]

Can you do this with video?

[@andreaegli]

Yes, but it's a bit complicated. I've added this to my list of videos-to-make

[@mayanksaraf4590]

hi, i hope you are doing good. I don't know whether you will reply to this msg but I am facing one issue that in the mobile view the text in the scrolling is looking small and i am not able to increase the size even if i am changing the size in @media only screen and (min-width: 360px) { .marquee__group span { font-size: 4.5vw; } is there any solution?

[@mariazakariya8604]

I have same issue did you find solution please share

[@VRX-football]

Hi, did You find the solution???🙌🙌

[@VRX-football]

@andreaegli

[@Lifestylenexus]

CODE DOESNOT START or execute any solutionss????

[@andreaegli]

it does, make sure that you followed all the steps. I use these codes in my projects

[@webdevluc]

Great tutorial, thanks for sharing

[@andreaegli]

Thanks, Lucian! You’re welcome 😊

[@MIMMarketing]

❤❤❤❤❤❤❤❤❤ wonderful. Thank you 😊 🎉🎉🎉🎉

[@markusbelina4289]

Unfortunately, this does not work at all - maybe too old for the latest Elementor version? Copied everything 1:1, but (literally) nothing is displayed. Am I the only one too dumb to do it ;) ?

[@andreaegli]

Hey Markus ☺️ you are not dumb but there could be smth you might have overlooked in adding? This works on all my projects which have the latest version of elementor. I will add it as a free template to the ohwow.com website if you want to check it out later this week 😉

[@arturo5050]

Thanks you!!!!!!❤

[@andreaegli]

You are welcome!!!! 🙏

[@sameerpatelxyz]

I saw you have installed ooohboi steroids plugin, how you use this any creative layout build with this plugin?

[@andreaegli]

Hey Sameer! I've installed it mostly for the GSAP, three.js, and locomotive integrations as I want to make some cool stuff with those in the future

[@siddas9758]

Hi Andrea Just wanted to say thanks for your awesome web design videos. They've really helped me improve my skills. If you ever need help with WordPress projects, I'd love to collaborate. Thanks again!

[@hasinulhudaenu8098]

❤❤

[@rafaelmoura910]

👍👍👍

[@Amindy8916]

Love this video, thank you so much for this! I have put this into my site, but having an error with image sizing. Would love your help! Will happily tip you! 😉 sending you an email!

[@andreaegli]

Hey! Thank you so much, sorry for the late reply, I was away...have you managed to make it work?

[@krisztinaveronicapalotas]

hi . Te Magyar vagy ? 🤩

[@andreaegli]

Nope, but from the area :D

[@FIoydMayweather]

thanks a lot girl

[@andreaegli]

you're welcome😉

[@francescodiano3104]

hi andrea, i'm struggling with a strange error... the animation starts again before the first image reach the right side of the screen, can't see nothing in the code 🫠 thank you

[@andreaegli]

Hey Francesco! One thing that comes to mind is that maybe you’re not duplicating the text. So, each div holds 3 spans, maybe you skipped one? I can look at your code if you send it to my email 😉

[@tariqsaeed3955]

Hey i don't want to use the black background, and am not able to figure out how can i make the text black because i have white background. .