Creating a marquee that appears infinite with CSS and is responsive

Question

I am trying to have a marquee that appears to be infinite looping while I have the css that makes this look good on desktop when on mobile or adjusting the window the spacing becomes jumbled and some elements disappear.

I have used the css I found here How to create a marquee that appears infinite using CSS or Javascript and this a codepen of what I have so far. https://codepen.io/zjolley/pen/gOWXqee

          <div class="bannerone">
            <span>Dragon</span>
            <span>Element</span>
            <span>Charger</span>
            <span>ZipDrive</span>
            <span>LightHouse</span>
            <span>Exxtra</span>
            <span>Hub</span> <span>iOS15</span>
            <span>File Drive</span>
            <span>Netherverse</span>
            <span>CLpool</span>&nbsp;&nbsp;&nbsp;
          </div>
          <div class="bannertwo">
             <span>Dragon</span>
            <span>Element</span>
            <span>Charger</span>
            <span>ZipDrive</span>
            <span>LightHouse</span>
            <span>Exxtra</span>
            <span>Hub</span> <span>iOS15</span>
            <span>File Drive</span>
            <span>Netherverse</span>
            <span>CLpool</span>&nbsp;&nbsp;&nbsp;
          </div>
          <div class="bannerthree">
            <span>Dragon</span>
            <span>Element</span>
            <span>Charger</span>
            <span>ZipDrive</span>
            <span>LightHouse</span>
            <span>Exxtra</span>
            <span>Hub</span> <span>iOS15</span>
            <span>File Drive</span>
            <span>Netherverse</span>
            <span>CLpool</span>&nbsp;&nbsp;&nbsp;
          </div>
          <div class="bannerfour">
             <span>Dragon</span>
            <span>Element</span>
            <span>Charger</span>
            <span>ZipDrive</span>
            <span>LightHouse</span>
            <span>Exxtra</span>
            <span>Hub</span> <span>iOS15</span>
            <span>File Drive</span>
            <span>Netherverse</span>
            <span>CLpool</span>&nbsp;&nbsp;&nbsp;
          </div>
        </div>

//CSS CODE

.banner {
  height: 40px;
  position: relative;
  overflow: hidden;
  font-family: Roobert;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 36px;
  width: 100%;
}

.banner .bannerone {
  animation: bannermove 40s linear infinite;
}

.banner .bannertwo {
  animation: bannermove 40s linear 10s infinite;
}

.banner .bannerthree {
  animation: bannermove 40s linear 20s infinite;
}

.banner .bannerfour {
  animation: bannermove 40s linear 30s infinite;
}

.banner div {
  position: absolute;
  width: 100%;
  right: 100%;
  height: 40px;
  display: flex;

  justify-content: space-between;
}

.banner:hover div {
  animation-play-state: paused;
}

@keyframes bannermove {
  0% {
    right: 100%;
  }
  50% {
    right: -100%;
  }
  100% {
    right: -100%;
  }
} ```

score 2 · Accepted Answer · answered Jul 24 '21 at 16:57

You are on the right track having more than one copy of the texts.

But you can simplify things - think of all the text stretched out in a line in just one banner. You have an even number of copies, so if you translate the whole banner to the left (negative X direction) by 50% on each iteration of the animation then start back again, where second half had got to (x=0) will be overwritten by the first half and it will all appear continuous.

You can probably get away with just two copies, it depends on how spread out you want things to be on really wide screens, but I've left the 4 copies in there just in case you need them.

.banner {
  height: 40px;
  position: relative;
  overflow: hidden;
  font-family: Roobert;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 36px;
  min-width: 200vw;
  /* ADDED */
  animation: bannermove 40s linear infinite;
  display: flex;
  justify-content: space-between;
}

.banner:hover {
  animation-play-state: paused;
}

@keyframes bannermove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.banner div {
  padding: 10px;
  /* just to ensure there is space between even on small devices */
}

<div class="banner">
  <div>Dragon</div>
  <div>Element</div>
  <div>Charger</div>
  <div>ZipDrive</div>
  <div>LightHouse</div>
  <div>Exxtra</div>
  <div>Hub</div>
  <div>iOS15</div>
  <div>File Drive</div>
  <div>Netherverse</div>
  <div>CLpool</div>
  <div>Dragon</div>
  <div>Element</div>
  <div>Charger</div>
  <div>ZipDrive</div>
  <div>LightHouse</div>
  <div>Exxtra</div>
  <div>Hub</div>
  <div>iOS15</div>
  <div>File Drive</div>
  <div>Netherverse</div>
  <div>CLpool</div>
  <div>Dragon</div>
  <div>Element</div>
  <div>Charger</div>
  <div>ZipDrive</div>
  <div>LightHouse</div>
  <div>Exxtra</div>
  <div>Hub</div>
  <div>iOS15</div>
  <div>File Drive</div>
  <div>Netherverse</div>
  <div>CLpool</div>
  <div>Dragon</div>
  <div>Element</div>
  <div>Charger</div>
  <div>ZipDrive</div>
  <div>LightHouse</div>
  <div>Exxtra</div>
  <div>Hub</div>
  <div>iOS15</div>
  <div>File Drive</div>
  <div>Netherverse</div>
  <div>CLpool</div>
</div>

Obviously you'll want to adjust the timing to suit you purposes.

This seems like the much easier approach! I can't seem to figure out though why
file drive
Is being cut off if I expand the height and add flex-wrap: nowrap it still is being shown on two lines — Dio, Jul 26 '21 at 17:46
Hmm, I don't know either - it must be related to the justification I think. Worth experimenting with that - do you need justification given that there are several copies of the text? Will ponder. I contemplated replacing the space with an HTML non breaking space but that would be a bit hacky. — A Haworth, Jul 26 '21 at 18:49
Looks like all I needed to do was remove the justification and add a width and white-space nowrap to the divs. Thanks again for the help! — Dio, Jul 27 '21 at 19:20

Creating a marquee that appears infinite with CSS and is responsive

1 Answers1