I am trying to create a unique scrolling effect for each line in a paragraph. The goal is to have each line repeat after one scroll is completed. For example:
Let's say there is a line like this in the paragraph:
1,2,3,4,
The desired outcome is for the 1 to come after the 4 once a single scroll has finished.
Although I have successfully implemented horizontal scrolling on the screen, I am struggling to make the sentences repeat.
Each sentence is wrapped in a span with either bar_content1 or bar_content2 classes to control the direction of movement.
I attempted to use the ::before function but couldn't get it to work as intended.
An image below illustrates the logic behind my ideal result.
Note: The HTML included in this question is not from my actual project, for privacy reasons. However, the code structure remains the same.
https://i.sstatic.net/hsJp4.png
.bar_content2 {
display: block;
width: 100%;
transform: translateX(-100%);
animation: move2 100s linear infinite;
}
@keyframes move2 {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
.bar_content1 {
display: block;
width: 100%;
transform: translateX(100%);
animation: move1 100s linear infinite;
}
@keyframes move1 {
0% {
transform: translateX(100%);
}
50% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* Animate each line in the paragraph */
p {
overflow: hidden;
position: relative;
white-space: nowrap;
/* Prevent line breaks */
}
p::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 100%;
/* Start from the right side */
animation: scrollText 20s linear infinite;
/* Adjust the duration as needed */
}
@keyframes scrollText {
0% {
left: 100%;
}
100% {
left: -100%;
}
/* Move to the left, creating the interlacing effect */
}<p>
<span class="bar_content1">1,2,3,4,</span>
<span class="bar_content2"> 5,6,7,8, </span>
</p>