News ticker

I like the feel of elements and I’ve started to redesign my own website which is currently in RWC. Transferring the resources I want to keep has been no problem, except for one item. I use the Tickertastic news ticker stack on the current site https://colinalcock.co.uk and would like to retain this function or something like it. Is there a simple way of recreating this in elements that a long retired web designer, well past his sell-by, might understand?

@MichaelDroste has a ticker on his site, he may be able to help

Thanks Steve. I might follow up.

If you get stuck I could probably whip up a quick custom component to do a news style ticker effect. Let me know…

1 Like

Thanks Dan, but @MichaelDroste beat you to it with an elegant solution which even I can adapt with my very limited coding knowledge.

1 Like

That’s awesome, pleased to hear it. Saves me a job :blush:

I posted a file here Animations it contains lots of animations, theres three types, blocks, pictures just a ticker. I know you have one but have a look here.

Thanks, Paul, I shall have a play later.

1 Like
<center>
<div class="ticker-wrap">
  <div class="ticker">
    <span>🎺 Be Sure To Listen To My Hit Songs On Apple YouTube Spotify and Amazon 🎶</span>
  </div>
</div>

<style>
.ticker-wrap {
  width: 400px; 
  background: orange; 
  overflow: hidden; 
  white-space: nowrap; 
  box-sizing: border-box;
  border-radius: 7px;   /* 👈 Rounded corners */
}

.ticker {
  display: inline-block;
  padding-left: 100%; /* start off screen */
  animation: ticker 35s linear infinite;
}

.ticker span {
  font: 20px Arial, sans-serif;
  color: black;
}

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
</style>
</center>

1 Like

And here’s another one our good friend ChatGPT whipped up…

<div x-data class="overflow-hidden whitespace-nowrap bg-white py-2">
  <div class="inline-block animate-[scroll_25s_linear_infinite]">
    <span class="mx-4">🎉 Elements is now available!</span>
    <span class="mx-4">🚀 Elements 1.12 ships with CMS beta</span>
    <span class="mx-4">🎨 New Core Templates added to library</span>
    <span class="mx-4">🛍️ Marketplace update coming Friday</span>
  </div>
</div>

<style>
  @keyframes scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }
</style>

CleanShot 2025-10-08 at 4 .44.14

2 Likes
<span class="mx-4">🛍️ Marketplace update coming Friday</span>

nice hint … :see_no_evil_monkey:

Oh no, we’re not shipping that just yet… stand down.

okay … it could have been a “hidden” hint. ^^

My bad. We ARE working on it and it’s really shaping up… but Friday is a bit too soon :rofl:

1 Like

Seems there is more interest than I expected. Thanks to all who have responded. I’m having fun playing with the solutions and adapting them to my brand colour and so on.

1 Like

Marquee anything. Images, svg’s, texts, blocks of arbitary content, anything.

No gaps if contents don’t fill width, ready to go on Store launch (for third parties).

3 Likes

That looks really nifty, nice work. Does it work by dropping in a folder of resources?

P.S. We’re working as fast as we can to get the backend tidied up so we can onboard third-parties… IF, it all goes to plan we’re looking at early December, so not long…

1 Like

No uses a drop zone, and splits top level elements found in the zone into items. So contents can be anything at all.

Okay… I’m curious as to how this will look in the editor :grimacing: Is it still WYSIWYG?

Obviously I can’t clone the items in the editor to fill the width. Only in Preview and published.