CODEWITHSUNDEEP
csscss-animationsinfinite-scrollmarquee
Freja
Freja

Reputation: 89

Pure CSS Continuous Horizontal Span Scroll Without Break Starting On-screen

I am trying to create a pure CSS scrolling marquee animation that starts halfway into the animation, with the content already on-screen, that then scrolls infinitely without a break.

I've found a couple examples but I'm having trouble 1. Integrating both solutions (starts on-screen + no gap), 2. Adapting for use with scrolling image instead of text.

Here is my reference: Pure CSS Continuous Horizontal Text Without Break

I'm finding it difficult to wrap my head around what is actually happening here which is why I can't fix it.

I am using an animation-delay to get the first marquee to start on-screen, and then there seems to be a long delay and/or some overlap happening before the second one comes in. I would like the second marquee to start seamlessly after the first, and then for the first to loop back to repeat seamlessly after the second, and so on.

I am using the image as a background image which is a remnant from using the deprecated marquee element. I am open to alternative solutions here. I have stitched 2 images together in an attempt to make it longer but can re-edit the image where necessary.

I appreciate your advice, thank you in advance.

Here is my code so far:

.container {
    white-space: nowrap;
  background-color: blue;
  width: 100%;
}

.marquee {
    display: inline-block;
    background-image: url(https://sligoil.com/wp-content/uploads/2022/02/icons-long-01.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    padding-top: 6.798%;
    width: 100%;
    color: transparent;
    padding-left: 100%;
    /*-moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);*/
  -moz-animation: scroll-left 20s linear infinite;
  -webkit-animation: scroll-left 20s linear infinite;
  animation: scroll-left 20s linear infinite;
}

#marq-1 {
      animation-delay: -10s;
}
#marq-2 {
      animation-delay: -20s;
}

@-moz-keyframes scroll-left {
  0% {
    -moz-transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
  }
}
        
@-webkit-keyframes scroll-left {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}
        
@keyframes scroll-left {
  0% {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
<div class="container">
    <span id="marq-1" class="marquee">.</span>
  <span id="marq-2" class="marquee">.</span>
</div>

Upvotes: 1

Views: 4093

Answers (1)

Adrien LAMOTTE
Adrien LAMOTTE

Reputation: 568

As you're using a background image, there is a simpler way to do that by animating the background image directly and using a background repeat.

PS: not sure what you mean about "that starts halfway into the animation"

.bg-marquee {
    background-color: blue;
    height: 50px;
    width: 100%;
    background-image: url(https://sligoil.com/wp-content/uploads/2022/02/icons-long-01.svg);
    background-repeat: repeat-x;
    background-size: 1000px auto;
    animation: marquee 5s infinite linear;
}

@keyframes marquee {
    0% { background-position: 0; }
    100% { background-position: -1000px; }
}
<div class="bg-marquee"></div>

Upvotes: 2

Related Questions