CSS Scrolling Text Loop - html

Question

I am trying to do continuous scrolling text using pure CSS.
Here is my HTML I am trying to scroll:
<div class="marquee">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas placerat maximus massa ut dictum. Sed eu est justo. Quisque pharetra vel tellus ac porttitor. Nunc luctus sollicitudin diam non dignissim. Phasellus mollis semper libero, nec rhoncus est tristique quis. Nulla eget pharetra nunc, sed faucibus felis. Curabitur nec posuere nisl. Quisque at vestibulum velit. Pellentesque sagittis lacus ut aliquet faucibus. Ut porta purus id mi tincidunt mollis. Integer vulputate, eros malesuada viverra rutrum, magna nisl vehicula nisi, nec pellentesque augue nunc vel felis. Sed consectetur lacinia quam et auctor. Cras nec ullamcorper orci. Vivamus id felis eu mauris tempor viverra eget in mi. Nam nibh risus, tincidunt in hendrerit quis, eleifend at dui. Aenean odio odio, eleifend vel malesuada porta, dapibus nec risus.</div>
</div>
and this my CSS I got, it works, but my problem is when the text is done, its takes away to for it to start up again....is there anyway when its done it starts from the beginning so when its at the end it looks like this:
eleifend vel malesuada porta, dapibus nec risus. Lorem ipsum
dolor sit amet, consectetur adipiscing
* {
margin:0;
padding:0;
border:0;
}
#keyframes slide {
from { left: 100%;}
to { left: -100%;}
}
#-webkit-keyframes slide {
from { left: 100%;}
to { left: -100%;}
}
#marquee {
color:red;
background:#f0f0f0;
width:100%;
height:120px;
line-height:120px;
overflow:hidden;
position:relative;
}
#text {
position:absolute;
top:0;
left:0;
width:100%;
height:120px;
font-size:30px;
animation-name: slide;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: slide;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count: infinite;
}

Answer 1

I don't think this is possible in a maintainable way using just CSS. The problem is that there isn't really a way to create elements that can wrap at the box level.
You effectively want an element to be able to appear in 2 places at once: once on the left side of the screen with the remaining content to be scrolled and again on the right side of the screen with the content that has already scrolled. The only CSS thing that I know that can do this is background images in the same way that graphics textures can wrap using UV repeating settings.
Considering that, the options are to use an <svg> which, which is an image, and set it as a repeating background of an element. Then, we can animate the background position to have it scroll.
The problem is that the text is not not selectable (since it's a rasterized image) and you will have to set content within the SVG in the CSS which isn't good practice.
However, as a proof of concept, you could do it. See the snippet below:
#keyframes slide {
from {
background-position-x: 0;
}
to {
background-position-x: -100%;
}
}
.container {
width: 100%;
height: 18px;
background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='300'>\
<text x='0' y='18'>hello world foo bar fizz buzz lorem ipsum</text>\
</svg>\
");
background-repeat: repeat;
background-size: auto;
animation: 5s linear infinite slide;
}
<div class="container"></div>

Answer 2

Here's a solution that scales well -
Detailed explanation available on my blog.
let outer = document.querySelector("#outer");
let content = outer.querySelector('#content');
repeatContent(content, outer.offsetWidth);
let el = outer.querySelector('#loop');
el.innerHTML = el.innerHTML + el.innerHTML;
function repeatContent(el, till) {
let html = el.innerHTML;
let counter = 0; // prevents infinite loop
while (el.offsetWidth < till && counter < 100) {
el.innerHTML += html;
counter += 1;
}
}
#outer {
overflow: hidden;
}
#outer div {
display: inline-block;
}
#loop {
white-space: nowrap;
animation: loop-anim 5s linear infinite;
}
#keyframes loop-anim {
0% {
margin-left: 0;
}
100% {
margin-left: -50% /* This works because of the div between "outer" and "loop" */
}
}
<div id="outer">
<!-- This div is important! It lets us specify margin-left as percentage later on. -->
<div>
<div id="loop"><div id="content">Hello, World </div></div>
</div>
</div>

Answer 3

A way to do this could also be to put your text on the site as a background image element. For this you could use your text element as a background images with -moz-element.
Your html code will look something like this (the classname repetition corresponds to your "text"):
<div class="repetition">
<h3 id="repeat">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas placerat maximus massa ut dictum. Sed eu est justo. Quisque pharetra vel tellus ac porttitor. Nunc luctus sollicitudin diam non dignissim. Phasellus mollis semper libero, nec rhoncus est tristique quis. Nulla eget pharetra nunc, sed faucibus felis. Curabitur nec posuere nisl. Quisque at vestibulum velit. Pellentesque sagittis lacus ut aliquet faucibus. Ut porta purus id mi tincidunt mollis. Integer vulputate, eros malesuada viverra rutrum, magna nisl vehicula nisi, nec pellentesque augue nunc vel felis. Sed consectetur lacinia quam et auctor. Cras nec ullamcorper orci. Vivamus id felis eu mauris tempor viverra eget in mi. Nam nibh risus, tincidunt in hendrerit quis, eleifend at dui. Aenean odio odio, eleifend vel malesuada porta, dapibus nec risus.</h3>
And the necessary css would be this (you can always change the styling, but the body part is the important part here):
.repetition {
height: 0px;
overflow: hidden;
}
h3 {
text-align: center;
font-weight: 300;
font-size: 50px;
}
body {
min-height: 100vh;
background-image: -moz-element(#repeat);
background-repeat: repeat-y;
background-position: center;
}
Here is a website giving a clear example as to how this could work: Background text image repetition