HTML Scrolling Text Wider than Container

Question

I've been working on this for a while and haven't come up with a suitable solution yet.

I have some banner text that absolutely has to scroll/marquee. The example I'm using is stock data but it's other, user-defined-on-the-fly, text that will ultimately go in my final page solution.

The issue I am trying to solve is that the text is clipped and doesn't fully display all of the text before repeating.

Secondary would be to have a smooth transition before restarting. i.e. a truly "circular" loop.

It's a pretty standard HTML/CSS-based 'marquee' though.

Any ideas on the above would be appreciated.

var text = 'Symbol: BABA Open: 168.71 Latest: 166.15 Change: -2.23 Symbol: PEP Open: 115.87 Latest: 115.91 Change: 3.32 Symbol: AAPL Open: 171.47 Latest: 170.42 Change: -0.38 Symbol: AMZN Open: 1627.86 Latest: 1607.95 Change: -14.7 Symbol: FB Open: 164.7 Latest: 162.5 Change: -1.45 Symbol: NFLX Open: 359 Latest: 356.87 Change: -2.2 Symbol: USO Open: 11.61 Latest: 11.71 Change: 0.23 Symbol: NKE Open: 85.56 Latest: 85.38 Change: 0.7 Symbol: YUM Open: 94.69 Latest: 94.12 Change: 0.27 Symbol: LEE Open: 2.64 Latest: 2.61 Change: -0.02';

//text is cutoff at width of parent container
$("#marquee-text").text(text);

.scroller {
  height: 20px;
  overflow: hidden;
  position: relative;
}

.scroller p,
.scroller span {
  /*font-size: 3em;*/
  white-space: nowrap;
  color: black;
  position: absolute;
  width: 100%;
  /*height: 100%;*/
  margin: 0;
  /*line-height: 50px;*/
  /*text-align: center;*/
  /* Starting position */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  /* Apply animation to this element */
  -moz-animation: example1 15s linear infinite;
  -webkit-animation: example1 15s linear infinite;
  animation: example1 15s linear infinite;
}


/* Move it (define the animation) */

@-moz-keyframes example1 {
  0% {
    -moz-transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
  }
}

@-webkit-keyframes example1 {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}

@keyframes example1 {
  0% {
    -moz-transform: translateX(100%);
    /* Firefox bug fix */
    -webkit-transform: translateX(100%);
    /* Firefox bug fix */
    transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
    /* Firefox bug fix */
    -webkit-transform: translateX(-100%);
    /* Firefox bug fix */
    transform: translateX(-100%);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="marquee-div" class="scroller">
  <span id="marquee-text"></span>
</div>

score 0 · Answer 1 · answered Feb 18 '19 at 22:29

If you want a truly circular marquee without the screen clearing before the first bit of text comes in again, you will have to copy the div layer twice so the second one comes in just after the first one has ended (otherwise you get the gap between the text startign again, check out this for a simple example:

<div class="marquee">
  <div>
    <span>You spin me right round, baby. Like a record, baby.</span>
    <span>You spin me right round, baby. Like a record, baby.</span>
  </div>
</div>

and css:

.marquee {
  height: 25px;
  width: 420px;

  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 200%;
  height: 30px;

  position: absolute;
  overflow: hidden;

  animation: marquee 5s linear infinite;
}

.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

(taken from https://codepen.io/jamesbarnett/pen/kfmKa[scrolling css marquee example][1]

Neat trick but it really requires me to know the size of the text ahead of time so that the percentages can be aligned. The example at CodePen breaks for the large text size in the original post. I'm going to keep this in the back pocket though because it'd be useful when the data size is known. — Sean Nilsen, Feb 18 '19 at 23:23

score 0 · Answer 2 · edited Feb 18 '19 at 22:49

You can use the old fashioned marquee:

<marquee behavior="scroll" direction="left" scrollamount="80" scrolldelay="1000">
   <span id="marquee-text"></span>
</marquee>

Although it's old html, but works fine on all browsers.

var text = 'Symbol: BABA Open: 168.71 Latest: 166.15 Change: -2.23 Symbol: PEP Open: 115.87 Latest: 115.91 Change: 3.32 Symbol: AAPL Open: 171.47 Latest: 170.42 Change: -0.38 Symbol: AMZN Open: 1627.86 Latest: 1607.95 Change: -14.7 Symbol: FB Open: 164.7 Latest: 162.5 Change: -1.45 Symbol: NFLX Open: 359 Latest: 356.87 Change: -2.2 Symbol: USO Open: 11.61 Latest: 11.71 Change: 0.23 Symbol: NKE Open: 85.56 Latest: 85.38 Change: 0.7 Symbol: YUM Open: 94.69 Latest: 94.12 Change: 0.27 Symbol: LEE Open: 2.64 Latest: 2.61 Change: -0.02';

//text is cutoff at width of parent container
$("#marquee-text").text(text);

.scroller {
 height: 20px;  
 overflow: hidden;
 position: relative;
}
.scroller p, .scroller span {
 /*font-size: 3em;*/
 white-space: nowrap;
 color: black;
 position: absolute;
 width: 100%;
 
 /*height: 100%;*/
 margin: 0;
 /*line-height: 50px;*/
 /*text-align: center;*/
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);    
 transform:translateX(100%);
 /* Apply animation to this element */  
 -moz-animation: example1 20s linear infinite;
 -webkit-animation: example1 20s linear infinite;
 animation: example1 20s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%);       
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<marquee behavior="scroll" direction="left" scrollamount="80" scrolldelay="1000">
   <span id="marquee-text"></span>
</marquee>

I can't in good conscience use an element that is deprecated and may lose browser support whenever they get around to removing it. https://www.w3.org/TR/2010/WD-html5-20100304/obsolete.html#the-marquee-element — Sean Nilsen, Feb 18 '19 at 23:14
alright, try this although the wait time is a while https://jsfiddle.net/pqrs0v9a/2/ — Patrick Igwe, Feb 18 '19 at 23:41
Thanks! Any ideas on how to get the "delay before appearance" to shorten? I've been tinkering with the initial translateX values and that doesn't seem to help much. I know it has to do with how wide the div is initially but I can't seem to get it to appear as soon as the data is set. — Sean Nilsen, Feb 19 '19 at 20:01
I decreased the load time from 50s to 29s https://jsfiddle.net/v7cu2zme/1/ — Patrick Igwe, Feb 20 '19 at 16:11

score 0 · Answer 3 · answered Feb 18 '19 at 23:43

I found the problem on the data being truncated to the parent container and can't believe I missed the:

 .scroller p, .scroller span {
   ...
   width: 100%; /* <== THIS */
   ...
 }

I am going to go back and tinker with the "200%" suggestion on the other half of the problem but the primary issue is sorted.

Thanks all for always being an amazing sounding board!

HTML Scrolling Text Wider than Container

3 Answers3