How to Create a Left‑Looping Scrolling Text Using HTML, CSS, and JavaScript
This article explains four different techniques—including pure JavaScript frame updates, setInterval with CSS transitions, CSS keyframe animation, and a text‑shadow trick—to achieve a continuously left‑scrolling text effect, compares their performance and complexity, and provides complete code samples for each method.
The article asks how to create the left‑looping scrolling text shown in the GIF and invites readers to consider possible implementations.
Method 1: Generate multiple elements based on the page width and move each element left by a few pixels on every animation frame using JavaScript; when an element moves out of view, reposition it to the far right. This approach is easy to understand but may cause performance issues because the position is updated every frame.
Method 2: Similar element generation, but movement is driven by setInterval (e.g., once per second) combined with a CSS transition: all 1s linear for smoother motion. Additional logic is required to prevent the transition from triggering when an element is repositioned to the right, and to pause the interval when the window is hidden.
Method 3: Arrange the text elements sequentially so that the end of one aligns with the start of the next, then apply a CSS animation such as animation: loop 10s linear infinite to move them leftward. This solution needs no JavaScript, offers better performance, and creates the illusion of a continuously scrolling container.
Below is the complete HTML/CSS code for Method 3, which can be resized to test on different screen widths:
<code style="padding: 16px; color: #333; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px"><!doctype html>
<html>
<head>
<title>LOOP</title>
<style>
@keyframes loop {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.box { white-space: nowrap; }
.scrollContent {
width: 600px;
display: inline-block;
text-align: center;
animation: loop 3s linear infinite;
}
</style>
</head>
<body>
<div class="box">
<div class="scrollContent">这是一段可以滚动的文本</div>
<div class="scrollContent">这是一段可以滚动的文本</div>
<div class="scrollContent">这是一段可以滚动的文本</div>
<div class="scrollContent">这是一段可以滚动的文本</div>
<div class="scrollContent">这是一段可以滚动的文本</div>
</div>
</body>
</html></code>Method 4: Improves performance further by using a CSS text-shadow: 600px 0 currentColor trick to create multiple visual copies of the same text without duplicating DOM elements. This method yields the best performance but only works for plain text.
<code style="padding: 16px; color: #333; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px"><!doctype html>
<html>
<head>
<title>LOOP</title>
<style>
@keyframes loop { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.box { white-space: nowrap; }
.scrollContent {
color: rebeccapurple;
width: 600px;
display: inline-block;
text-align: center;
animation: loop 3s linear infinite;
text-shadow: 600px 0 currentColor, 1200px 0 currentColor, 1800px 0 currentColor, 2400px 0 currentColor;
}
</style>
</head>
<body>
<div class="box">
<div class="scrollContent">这是一段可以滚动的文本</div>
</div>
</body>
</html></code>In summary, Method 1 is the most straightforward but may suffer from performance concerns; Method 2 optimizes performance at the cost of added complexity; Method 3 is simple, JavaScript‑free, and performant; Method 4 offers the best performance for pure text but requires familiarity with text‑shadow techniques.
The author hopes these approaches inspire readers to implement their own scrolling text effects.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.