How to Build Seamless Text Scrolling for High‑Traffic Web Pages

1. Introduction

After months of intensive work, the author reflects on the passage of time and the completion of a large‑scale marketing activity, preparing to evaluate its real value.

2. Project Background

The project is a nationwide hotel popularity ranking marketing campaign spread through WeChat, expecting traffic at the hundred‑million level with concurrency over 2000 requests per second. The author was responsible for the front‑end homepage presentation.

3. Implementation Methods

Three approaches can be used to achieve seamless text scrolling:

marquee – the classic HTML tag, now deprecated, requires the entire scroll to finish before repeating and performs poorly with responsive layouts.

jQuery/Zepto – a carousel‑like mechanism that can handle variable text length but often causes jitter during scrolling.

CSS3 + minimal JavaScript – using CSS animations together with a small script to duplicate the first item, enabling smooth, length‑independent scrolling.

4. Implementation Process

First, set up the HTML structure (see image). The first data item is duplicated at the end to allow seamless looping.

Next, apply the CSS (see image). Because of iOS rendering quirks, enable hardware acceleration on the scrolling element to avoid stutter and cut‑off text.

Finally, add the JavaScript (see image). The jQuery script calculates the scrolling element’s width as the total width of its children minus the width of the first (or last) element, guaranteeing a seamless effect. Dynamic addition of a CSS3 class is used because native CSS3 animation may not start automatically on iPhone during the initial page load.