CODEWITHSUNDEEP
javascripthtmlcssmarqueenews-ticker
user1406440
user1406440

Reputation: 1645

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

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?

Upvotes: 4

Views: 8048

Answers (2)

Spectric
Spectric

Reputation: 31992

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>

Upvotes: 4

A Haworth
A Haworth

Reputation: 36492

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.

Upvotes: 5

Related Questions