The concept is simple, when the text gets too long for the container, it would infinitely animate (scroll) from left to right, and repeat this processes after it reaches the end.
How should I go about making this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="auto-scroll">
<p>
This text should scroll. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi commodi magni quo officia error ab veniam aspernatur. Quos ducimus, hic, maxime dicta optio quidem
nostrum sint commodi velit, ut distinctio. And return to beginning.
</p>
</div>
<style>
.auto-scroll {
background: black;
padding: 18px;
}
.auto-scroll p {
font-family: monospace;
font-size: 18px;
color: white;
margin: 0;
white-space: nowrap;
overflow: auto;
}
.auto-scroll ::-webkit-scrollbar {
height: 10px; /* will be 0px */
}
.auto-scroll ::-webkit-scrollbar-track {
background: #000;
}
.auto-scroll ::-webkit-scrollbar-thumb {
background: #fff;
}
</style>
</body>
</html>You don't need javascript you can make it in css like this following code
div{
width: 100%;
background-color: black;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
p{
display: inline-block;
color: #FFF;
padding-left: 100%;
animation: move 25s linear infinite;
}
@keyframes move {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}<div>
<p>This text should scroll. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi commodi magni quo officia error ab veniam aspernatur. Quos ducimus, hic, maxime dicta optio quidem nostrum sint commodi velit, ut distinctio. And return to beginning.</p>
</div>