News ticker

Elements
1

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?

2

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

3

Thanks Steve. I might follow up.

4

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
5

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
6

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

7

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.

8

Thanks, Paul, I shall have a play later.

1 Like
9 
<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
10

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
11 
<span class="mx-4">🛍️ Marketplace update coming Friday</span>

nice hint … :see_no_evil_monkey:

12

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

13

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

14

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

1 Like
15

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