从左到右 TEXT SLIDER

Question

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>

Answer 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>

Answer 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.