WEBFLOW CLONEABLE: Logo Ticker & Carousel That Works with Any Content
Вставка
- Опубліковано 22 сер 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.
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!
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.
@@lumiousmedia 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.
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
@@lumiousmedia 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.
would there be a place to troubleshoot steps? followed video and code, and its not moving in the preview
usually ,the reason why it's not moving is bc of the structure. Send me the clone over email