Search code examples
javascriptjquerycsscss-animationsmarquee

Is it possible to create an endless loop of the same html elements, scrolling from the top to the bottom with a portal like effect?

I'm trying to create an endless animation loop using a set of html elements, similar to a marquee. The goal is to have all the elements visible in the container at the beginning of the animation, with each element sliding downward. As soon as the bottom element starts to go out of frame, it would appear at the top of the container again.

What I've done so far, is duplicated the elements that I want repeated, and added a different animation for each set of elements. The animation for the first set of elements is set to start off screen and go all the way down off the opposite end of the screen at twice the amount of time it will take for the animation for the second set of elements will take.

The second set of elements will start at the top of the container and go off screen from there.

I get the desired result for the first iteration of this animation, but then there's a huge white space. So, I'm not really repeating the animation correctly.

I was thinking I could use javascript to set an interval, so that every time the animation ends I could reposition the elements back into their starting spots but I'm not sure if that would be the best way to achieve this.

   

 .slider {
        height: 200px;
        background-color: #ddd;
        border:solid 1px black;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        display:flex;
        justify-content: flex-start;
        flex-direction: column;
      }
      .slide{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        font-size: 20px;
        position: absolute;
        width:100%;
      }

      .slide > div{
        height:calc(200/8);
        width:100%;
        border:solid 1px red;
        display:flex;
        justify-content: center;
      }

      .one{
          top:-100%;
          animation:slider2 18s linear infinite;
      }
      
      .two{
          top:0px;
          animation: slider 9s linear infinite;
      }
      
      @keyframes slider {
        0%   { top:0px; }
        100%   { top:100% }
      }

      @keyframes slider2{
        0%   { top:-100%; }
        100%   { top:100% }
      }
   

 <body>

        <div class='slider'>
            <div class='slide one'>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
            </div>
            <div class='slide two'>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
            </div>
        </div>
           
          
    </body>

Solution

  • https://codepen.io/Nerdpuff/pen/PoPXNpQ

    The problem was the animations didn't 'reset' at the right time.

    I've changed it so both animations take 9s and both travel the same difference. But they stack.

    When slider2 is just about to top: 0% and reset, slider starts up at 0% and 'continues the loop'.