A good example of what I'm trying to achieve would be the ticker effect on

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 ing 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.

/

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 plex/custom javascript?

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

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 ing 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/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 plex/custom javascript?

• javascript
• html
• css
• marquee
• news-ticker

• 1 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 Commented Jun 12, 2021 at 19:43

2 Answers 2

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.

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>