Css - How can I make an infinite-scrolling marquee? I can't get my items to repeat

meAndTheBirds
August 25, 2024
110 views
1 vote
2 Answers

I’m sorry if this question is a bit elementary but I’ve been hitting into a wall with CSS for a bit now. And I can’t wrap my head around infinite scrolling marquees. I still feel pretty confident/happy because I was able to figure out how to do the rest of the styling and sort of business on my own on the spot, but I just had a problem with making the .marquee-row-items repeat once they left the parent element.

I know I can just add more marquee row items but I only have a limited number to work with and I really wanna make this infinite scrolling without any large or noticeable gaps between animation. But in my code it always "restarts" rather than continuing if that makes sense.

Hopefully the code snippet is easier to understand.

I believe this can all be accomplished with CSS without touching JS… right?

I tried playing around with the width of the parent element and the row. I also looked up a tutorial that said to add a variable gap but even after playing with the code pen I don’t think I understood it yet. I added the –gap variable.

CSS

.marquee {
    --gap: 1em; 
    display: flex;
    /* align-items: center; */
    flex-direction: column;
    gap:var(--gap);

    margin: 0 auto;
    padding: 1em;
    
    border: 1px solid black;
    background: black;

    overflow: hidden;
    position: relative; /*/ Allows psuedo-elements to position themselves relative to the container /*/
}
.marquee::before,
.marquee::after {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 2;

    display: block;
    width: 50%;
    height: 100%;

    opacity: 100%;

    user-select: none;
    pointer-events: none; /*/ Allows us to pause the animation by hover by removing div 'obstruction' /*/
}
.marquee::before { /*/ Adds a fade out/in effect at the both ends of our marquee container /*/
    background: linear-gradient(to right, black, transparent);
}
.marquee::after {
    background: linear-gradient(to left, black, transparent);
}


.marquee__row {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    gap: var(--gap);
    justify-content: space-around;

    /* min-width: 100%; */
    animation: marqueeMoveX 10s linear infinite;
    -webkit-animation: marqueeMoveX 10s linear infinite;
}

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

.marquee__row:nth-of-type(odd) {
    animation-play-state: reverse;
}

.marquee__row__item {
    display: flex;
    align-items: center;
    padding: 1em;

    font-size: 1em;
    color: white;
}

.marquee__row__item i {
    font-size: 5em;
}

@keyframes marqueeMoveX {
    0% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-100% - var(--gap)));
        -webkit-transform: translateX(calc(-100% - var(--gap)));
        -moz-transform: translateX(calc(-100% - var(--gap)));
        -ms-transform: translateX(calc(-100% - var(--gap)));
        -o-transform: translateX(calc(-100% - var(--gap)));
    }
}

HTML

    <div class="marquee">
                <div class="marquee__row">
                    <div class="marquee__row__item">
                        <i class="fas fa-code"></i> <span> code </span>
                    </div>
                    <div class="marquee__row__item">
                        <i class="fab fa-html5"></i> <span> code </span>
                    </div>
                    <div class="marquee__row__item">
                        <i class="fab fa-css3-alt"></i> <span> code </span>
                    </div>
                    <div class="marquee__row__item">
                        <i class="fab fa-js"></i> <span> code </span>
                    </div>
                    <div class="marquee__row__item">
                        <i class="fas fa-microchip"></i> <span> code </span>
                    </div>
                </div>
                <div class="marquee__row">
                    <div class="marquee__row__item">
                        <i class="fab fa-java"></i> <span> code </span>
                    </div>
                    <div class="marquee__row__item">
                        <i class="fab fa-php"></i> <span> code </span>
                    </div>
                    <div class="marquee__row__item">
                        <i class="fab fa-sass"></i> <span> code </span>
                    </div>
                    <div class="marquee__row__item">
                        <i class="fab fa-react"></i> <span> code </span>
                    </div>
                    <div class="marquee__row__item">
                        <i class="fas fa-bug"></i> <span> code </span>
                    </div>
                </div>
            </div>

Answers

Here is an example of an infinite adaptive running line. No js. However, pay attention to the comments in the code:

It is possible that the length of your line is less than the width of the screen, so you need to duplicate the text.
You need to know the exact length of your line in pixels, after loading the font and rendering. This can be calculated in js. Or calculated in advance and written into the code. Unfortunately, it happens that fonts are rendered differently in different browsers, so you will need to test your code in each browser separately.

CodePen Link

body {
  display: flex;
  min-height: 100vh;
}

.running-line-wrapper {
  margin: auto;
  width: 100%;
  overflow: hidden;
}

.running-line {
  font-size: 100px;
  font-family: sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #444;
  white-space: nowrap;
}

.running-line {
  animation: run 2s linear infinite;
}

@keyframes run {
  from {
    transform: translateX(0%);
  }
  /* Magic is here. This is the width of the elem with text after rendering the page */
  to {
    transform: translateX(-1683.35px);
  }
}

<div class="running-line-wrapper">
  <div class="running-line">
    <!-- The overall width of the text element should be twice the width of the screen -->
    <span>Lorem ipsum dolor sit amet *</span>
    <span>Lorem ipsum dolor sit amet *</span>
    <span>Lorem ipsum dolor sit amet *</span>
  </div>
</div>

In your code, you can set style in "marquee__row__item" class to set space. also if you want to change the speed just change time of animation "animation: marquee 25s linear infinite;" and it will pause on hover. Below is an example according to your code you can check.

<div class="marquee-container">
        <div class="marquee">
            <div class="marquee__row__item">
                <i class="fas fa-code"></i> <span>Sets how the text is scrolled within the marquee</span>
            </div>
            <div class="marquee__row__item">
                <i class="fab fa-html5"></i> <span>Sets the interval between each scroll movement in milliseconds</span>
            </div>
            <div class="marquee__row__item">
                <i class="fab fa-css3-alt"></i> <span>Fires when the marquee has reached the end of its scroll position. </span>
            </div>          
        </div>
    </div>
    
    <div class="marquee-container">
        <div class="marquee">
            <div class="marquee__row__item">
                <i class="fab fa-js"></i> <span>The key to controlling the speed is the animation-duration property in seconds</span>
            </div>
            <div class="marquee__row__item">
                <i class="fas fa-microchip"></i> <span>When the user hovers over .marquee-container, the animation-play-state is set to paused, stopping the animation temporarily.</span>
            </div>
            
            
        </div>
    </div>
<style type="text/css">
        .marquee-container {
            overflow: hidden;
            white-space: nowrap;
            position: relative;
            width: 100%;
        }

        .marquee {
            display: inline-block;
            padding-left: 100%; /* Start off screen */
            animation: marquee 25s linear infinite;
        }

        .marquee .marquee__row__item {
            display: inline-block;
            padding-right: 50px; /* Gap between items */
        }

        @keyframes marquee {
            from {
                transform: translateX(0%);
            }
            to {
                transform: translateX(-100%);
            }
        }

        .marquee-container:hover .marquee {
            animation-play-state: paused; /* Stop scrolling on hover */
        }
    </style>

Please signup or login to give your own answer.

Click here to cancel reply.

Css – How can I make an infinite-scrolling marquee? I can't get my items to repeat

Answers