WEBFLOW CLONEABLE: Logo Ticker & Carousel That Works with Any Content
HTML-код
- Опубликовано: 21 окт 2024
- Hey everyone! In today's video I want to show how to create a logo ticker/carousel in Webflow that works with any kind of content you put inside. There are lot of websites that do use logo carousels and chances are you want to implement it too. I was always looking for a ticker that's easy to integrate and won't require duplicating logos or doing other CSS/JS wizardy: a simple carousel anyone can use without worrying around the code.
👇 Clone the Ticker here:
webflow.com/ma...
📄 Full Documentation & Features:
thelumious.not...
If you'll get any questions or maybe spot a bug, drop it in the comment section below.
Excited to give it a go! Marquees are always fiddly to work with, looks great
This is a godsend. Thank you! I've been tinkering with the "native" option for so long-what a waste of time. THIS setup is so much better. Thank you!
Glad it helped. If you'll spot any bugs, let me know.
Beautiful implimentation. I just made a simple carousel with CSS animations, but this takes it to another level.
Thanks, my man. Yeah, I probably was in the same boat as you. Just didn't liked that my client have to clone the logos, and then understand how to work with the CSS...you got the picture.
This seems solid man, thanks for sharing. I've had a lot of frustration with solutions that only use HTML/CSS, they always seem to break as soon as you add or remove logos.
One thing I had to do so it work well on mobile was remove the lazy load, before that it was glitching. Thanks again.
Great to see it worked for you. And thanks for your support.
@@saascouple is there a way we can control the speed on mobile?
I found a solution. duplicating the ticker and using a dynamic attribute to control the speeds in the component settings.
@@scotthumphrey2336 nope. Haven't built that out. But the code uses the width of logo container. So, if you set a fixed width to your logo container, it will use the same speed.
I'll build a mobile speed too closer to the end of the month. Working right now on publishing my CSS framework.
Hi Chris, do you have to do something before it can start to loop? I copied the one with the fade but it's not working
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent)
mask-mode: alpha
Custom properties for the fade option (this is in the clonable but not in the docs so I put it here as well). Thanks!
Awesome work, thank you!
Great tutorial and works so much better than trying to build directly in webflow which I have had many issues with. Is there anyway to prevent in ticker from stopping when you hover over it?
Not at the moment. I'll do an update over the weekend and send you a reply
Check back Monday morning
@@saascouple has this been added?
@@stevenhilario382 not yet. have it on my backlog this weekend. I wanna do multiple extra features at once. Will chime you in once published.
Hi, Thank you for this great solution! However, it doesn't work with GIF images. I put a text and a GIF image side by side, but the GIF image always overlaps the text. The GIF image won't occupy the space.
Daniel, thanks for your patience. Usually, it happens because you don't have a fixed width. Have you added the width and height to the GIF image? Send me the URL so I could have a look.