'Left to Right TEXT SLIDER

enter image description here Hey guys, do you know why this is happening? I have set the max width to the screen size. I also tried to take the slider into a new div, but it still keeps going like it want to go. Im trying to do a infinite slider that goes from left to right, and viceversa. But I am stucked with this problem, the slider goes over the width of the page and it creates more and more size to the right. Do you know if there is any way to do this in a proper way, or if i can somehow remove the text by the way it goes away from the screen? Thxx

.slide {
    margin-top: 25vw;
    margin-bottom: 12rem;
    animation: 10s slide;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    color: transparent;
    -webkit-text-stroke: 2px #f1efd4;
    font-size: 8vw;
    white-space: nowrap;
    letter-spacing: 0.1em;
    word-spacing: 0.3em;
}


@keyframes slide {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}
                    <h3 class="slide" style="animation-direction: alternate-reverse; -webkit-text-stroke: 2px #424239;"> &nbsp;&nbsp;Sobre mi Sobre mi Sobre mi &nbsp;&nbsp;</h3>
javascripthtmlcss


Solution 1:[1]

Just use overflow-y: hidden If that's what you are trying to achieve.

.slide {
    margin-top: 25vw;
    margin-bottom: 12rem;
    animation: 10s slide;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    color: transparent;
    -webkit-text-stroke: 2px #f1efd4;
    font-size: 8vw;
    white-space: nowrap;
    letter-spacing: 0.1em;
    word-spacing: 0.3em;
    overflow-x: hidden;

}


@keyframes slide {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}
                    <h3 class="slide" style="animation-direction: alternate-reverse; -webkit-text-stroke: 2px #424239;"> &nbsp;&nbsp;Sobre mi Sobre mi Sobre mi &nbsp;&nbsp;</h3>

Solution 2:[2]

To achieve this, you have to hide the overflow.

.slide {
    margin-top: 25vw;
    margin-bottom: 12rem;
    animation: 10s slide;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    color: transparent;
    -webkit-text-stroke: 2px #f1efd4;
    font-size: 8vw;
    white-space: nowrap;
    letter-spacing: 0.1em;
    word-spacing: 0.3em;
    
    
}
body {overflow-x: hidden; /* overflow-y: hidden; uncomment if you dont want the other scrollbar */}


@keyframes slide {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}
<h3 class="slide" style="animation-direction: alternate-reverse; -webkit-text-stroke: 2px #424239;"> &nbsp;&nbsp;Sobre mi Sobre mi Sobre mi &nbsp;&nbsp;</h3>

Hiding the overflow in the body instead of the text will prevent it from being cut off, which is why I didn't do it on the text. You can also uncomment the /overflow-y: hidden;/ part if you would like there to be no scrollbars.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Saikat Roy
Solution 2 ethry

Related Questions