CODEWITHSUNDEEP
htmlcss
Dio
Dio

Reputation: 25

Creating a marquee that appears infinite with CSS and is responsive

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%;
  }
} ```

Upvotes: 0

Views: 3985

Answers (1)

A Haworth
A Haworth

Reputation: 36512

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.

Upvotes: 2

Related Questions