Struggling with creating a seamless HTML/CSS scrolling text feature. The scrolling starts on the right and moves across correctly, but then vanishes for 6-7 seconds when it reaches the left side due to width: 100%; on #marqueeText, causing it to continue off screen for about 1020px (container width).
If I eliminate width: 100%;, the #marqueeText is only approximately 150px wide, scrolls in from the right across the screen about 300px (-100%), and repeats.
const timePerPixel = 5;
const containerWidth = 1120;
const text = document.getElementById('marqueeText');
const textWidth = text.offsetWidth;
const distance = textWidth + containerWidth;
const duration = timePerPixel * distance;
text.style.animationDuration = `${duration}ms`;@keyframes marquee-animation {
from {
/* Start right out of view */
transform: translate3d(100%, 0, 0);
}
to {
/* Animate to the left of the container width */
transform: translate3d(-100%, 0, 0);
}
}
.topmarquee {
width: 100%;
border: 1px solid #000;
}
.topmarquee .marquee {
width: calc(100% - 200px);
position: relative;
overflow: hidden;
height: 31px;
}
.topmarquee .marquee #marqueeText {
display: block;
position: absolute;
top: 0;
right: 0;
margin: 0;
white-space: nowrap;
transform: translate3d(100%, 0, 0);
animation-name: marquee-animation;
animation-iteration-count: infinite;
animation-timing-function: linear;
line-height: 31px;
width: 100%;
}<div class="d-none d-lg-flex row topmarquee mt-4">
<div class="marquee">
<p id="marqueeText" class="marqueeText mb-0">
This is a test website
</p>
</div>
</div>(The animation properties are separate due to JS that adjusts animation-duration based on text length for consistent speed, referenced from: Marquee text effect. Same scrolling speed no matter the length of the text)
Want it to reappear on the right once it disappears off the left for a seamless appearance.