You call it "ticker," I call it "marquee" - which is the old-fashioned name and function that was actually supported in HTML some years ago and still seems to work properly, but wouldn't be nearly as flexible as your way by being able to format the text via the Elementor widget. I've used these a number of times on client sites. Human beings are naturally attracted to moving text and, if it doesn't look too circus-like, can actually be quite effective. Thanks for the tutorial!
Thanks! A "scrolling marquee" must trace back to signage in the physical world, and then a "ticker" probably originated with the scrolling news channel tickers we've all grown accustomed to? Being able to style the text with Elementor controls is definitely a plus. I was having some fun with the newer text outline support.
Is there a way to make this work with a Iconlist widget (set to inline)? I can make it animate by changing the class from .elementor-heading title to .elementor-list-item-items const ticker = document.querySelector('.ticker-wrapper .elementor-icon-list-items'); I also could change the CSS so the listitems don't wrap /* Ensure the container doesn't overflow */ .ticker-wrapper { overflow: hidden; white-space: nowrap; width: 100%; box-sizing: border-box; position: relative; } .ticker-wrapper ul.elementor-icon-list-items.elementor-inline-items { display: flex; flex-wrap: nowrap; } That lookeds like it was working fine, but unfortunate the list items shift to the beginning at the end of each loop. Any ideas?
Good question. We are experimenting with other widgets to see if we can get them to animate nicely. The icon list widget would be great, because it would be easy for clients to manage.
@@KingGrizzly Indeed, way easier than the heading widget imo. Use a iconlist without icons and you have the same thing. You can even show dividers and make each item clickable.
@@franktielemans6624 Think I got it close with the help of GPT, there is still a "jump" when the list resets. The ul needed to no-wrap. I'll make a video after lunch if I can get rid of that jump. Grab the snippet: kinggrizzly.com/wp-content/uploads/snippets/scrolling-marquee-icon-list.txt Note: you need to add the 'scrolling-marquee' class to the icon list and then fiddle with the styling and spacing of the list items, icons, and dividers to your preference. There is also an option in the JS to set the number of times the list repeats. See if it works for you and if you can improve it at all!
And I’m only mentioning for selfish reasons of course..eg like a scrolling display of discounts for a product or service based on custom fields where the title is custom field element and on click takes you to said special archive or single post. Hehe. Sorry
I was thinking the same and have built this before. It's hard to get the loop grid carousel to do a smooth scroll. It wants to slide 'x' amount of grid items at a time. Maybe Chris has a clever way to do this smoothly. I'll ask him!
Thank you for this tutorial.
You call it "ticker," I call it "marquee" - which is the old-fashioned name and function that was actually supported in HTML some years ago and still seems to work properly, but wouldn't be nearly as flexible as your way by being able to format the text via the Elementor widget. I've used these a number of times on client sites. Human beings are naturally attracted to moving text and, if it doesn't look too circus-like, can actually be quite effective. Thanks for the tutorial!
Thanks! A "scrolling marquee" must trace back to signage in the physical world, and then a "ticker" probably originated with the scrolling news channel tickers we've all grown accustomed to?
Being able to style the text with Elementor controls is definitely a plus. I was having some fun with the newer text outline support.
Is there a way to make this work with a Iconlist widget (set to inline)?
I can make it animate by changing the class from .elementor-heading title to .elementor-list-item-items
const ticker = document.querySelector('.ticker-wrapper .elementor-icon-list-items');
I also could change the CSS so the listitems don't wrap
/* Ensure the container doesn't overflow */
.ticker-wrapper {
overflow: hidden;
white-space: nowrap;
width: 100%;
box-sizing: border-box;
position: relative;
}
.ticker-wrapper ul.elementor-icon-list-items.elementor-inline-items {
display: flex;
flex-wrap: nowrap;
}
That lookeds like it was working fine, but unfortunate the list items shift to the beginning at the end of each loop.
Any ideas?
Good question. We are experimenting with other widgets to see if we can get them to animate nicely. The icon list widget would be great, because it would be easy for clients to manage.
@@KingGrizzly Indeed, way easier than the heading widget imo. Use a iconlist without icons and you have the same thing. You can even show dividers and make each item clickable.
@@franktielemans6624 Think I got it close with the help of GPT, there is still a "jump" when the list resets. The ul needed to no-wrap. I'll make a video after lunch if I can get rid of that jump. Grab the snippet: kinggrizzly.com/wp-content/uploads/snippets/scrolling-marquee-icon-list.txt
Note: you need to add the 'scrolling-marquee' class to the icon list and then fiddle with the styling and spacing of the list items, icons, and dividers to your preference. There is also an option in the JS to set the number of times the list repeats. See if it works for you and if you can improve it at all!
Hey. Great stuff. Maybe you can do one a ticker/marquee with ACF where you show the post title in a scrolling loop grid.
And I’m only mentioning for selfish reasons of course..eg like a scrolling display of discounts for a product or service based on custom fields where the title is custom field element and on click takes you to said special archive or single post. Hehe. Sorry
I was thinking the same and have built this before. It's hard to get the loop grid carousel to do a smooth scroll. It wants to slide 'x' amount of grid items at a time.
Maybe Chris has a clever way to do this smoothly. I'll ask him!
@@caknuckler This would be handy! We'll figure out a demo.
A couple of lines of JavaScript to hook into the Swiper API's 'free mode' is what you need 😉 ... swiperjs.com/swiper-api#param-freeMode