Continuous scrolling ticker/marquee with multiple messages - JS plugin needed?

Question

A good example of what I'm trying to achieve would be the ticker effect on https://aboutface.com

Based on another example I saw a while back I came up with this. But as you can see, the message crops and you don't see the 2nd message coming into the screen. The scrolling/visible area should span the width of the white box - or 12px from each side with the left/right padding.

https://jsfiddle.net/ho34yvtL/1/

Also, I guess this will be problematic on desktop as you'd need several more duplicate messages. Right now, if I could just display 1 message continuously that'd be great. But ideally I'd like to support multiple.

So basically I want text to scroll continuously across the screen with set spacing between each item. So you see multiple messages at the same time if space allows, unlike the old school marquee tag.

If what I'm trying to achieve isn't possible, is there a preferred method for this, a plugin or will it require complex/custom javascript?

Sorry I didn't explain very well. I'll update question too. Basically the messages should go to the edge of the white box (or 12px from the left/right) but they just crop to the width of the text. — user1406440, Jun 12 '21 at 19:43

Spectric · Answer 1 · 2021-06-12T20:14:41.573

Apply width:100% to .msg. If we want to apply a 12px padding on the left and right, we can use CSS calc() to subtract 24px from 100%.

Additionally, margin-left:50px can be applied to the messages to get that 50px spacing between the two.

The following example preserves the 12px padding in the container whilst maintaining 50px spacing between each item.

body {
  background: red;
}

.page-head {
  background: white;
  box-sizing: border-box;
  padding: 0;
  position: fixed;
  top: 0;
  width: 375px;
}

/**
 * Ticker
 */

.page-head__ticker {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Arial";
  font-size: 11px;
  font-weight: Bold;
  height: 36px;
  line-height: 1;
  padding: 0 12px;
  text-transform: uppercase;
}

.msg {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  width:calc(100% - 24px);
}

.msg span {
  animation: marquee 6s linear infinite;
  display: inline-block;
  padding-left: calc(100% - 24px);
  margin-left:50px;
}

.msg--two span {
  animation-delay:3s;
  margin-left:50px;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-100%, 0);
  }
}

<header class="page-head">

  <div class="page-head__ticker">
    <p class="msg"><span>Free Shipping on orders over $50</span></p>
    <p class="msg msg--two"><span>Free Shipping on orders over $50</span></p>
  </div>

</header>

Thanks! I tried that but it ignores the 12px left/right padding and also the 24px that should be between each item. This is why I'm thinking JS might be needed :/ — user1406440, Jun 12 '21 at 19:46
The spacing between each items is due to the `animation-delay`. — Louys Patrice Bessette, Jun 12 '21 at 19:53
@LouysPatriceBessette doh, missed that! I see, so spacing is determined by delay rather than a fixed value. Thanks! — user1406440, Jun 13 '21 at 07:57
I noticed that the text on the left disappears too early (with "over $50" remaining). It would be nice to have it scroll off the left completely. — thdoan, Jan 01 '23 at 09:11

score 3 · Answer 2 · answered Jun 12 '21 at 20:10

One simple way to get a continuous scrolling effect is to have two copies of your messages and scroll with an animation just 50% of the total width. That way it is smooth - all the messages have gone through and it starts again, 'overwriting' the second copy.

Here's a snippet - it has 24px between the messages but of course such styling can be altered to suit what you want.

body {
  background: red;
}

.page-head {
  background: white;
  box-sizing: border-box;
  padding: 0;
  position: fixed;
  top: 0;
  width: 375px;
}


/**
 * Ticker
 */

.page-head__ticker {
  font-family: "Arial";
  font-size: 11px;
  font-weight: Bold;
  height: 36px;
  line-height: 1;
  padding: 0 12px;
  text-transform: uppercase;
  overflow: hidden;
}

.msg {
  rmargin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 6s linear infinite;
  display: inline-block;
}

span {
  padding-left: 24px;
  /* to give a gap between messages */
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, 0);
    /* changed from 100% */
  }
}

<header class="page-head">

  <div class="page-head__ticker">
    <p class="msg"><span>Free Shipping on orders over $50</span><span>And here is the second message</span><span>Free Shipping on orders over $50</span><span>And here is the second message</span></p>
  </div>

</header>

If your messages are collectively too short to cover the window allocated to the marquee you may want to increase the gap between eg. with a bit of JS.

I think this works well, similar to my original example but seems to have a bit more control regarding spacing. Yeah I was thinking, especially for desktop there really is noway other than to use JS for scalability as you'll always need more items when the screen is wider. So would almost need to check screen width and add more in if the total width of messages are less than the viewport width? — user1406440, Jun 13 '21 at 08:00
@A Haworth I like this method! The only issue I've had with it is that I have `display: flex` on the container to align/centre text which seems to crop the messages within `.msg`. Any ideas? I thought I'd fixed with `flex-shrink: 0` but then there's a white space before the 2nd copy comes in — user1406440, Jun 13 '21 at 11:21

Continuous scrolling ticker/marquee with multiple messages - JS plugin needed?

2 Answers2