Puan
28,728
Çözümler
0
- Konum
- Freanchey
- Mesajlar
- 3,049
- Katılım
- 2 Eki 2026
- Tepkime puanı
- 3,565
- Puan
- 28,728
- Web sitesi
- glomaxgpt.com
It’s worth noting that a horizontal marquee brings many accessibility challenges. Moving text can be distracting and difficult to read. Consider carefully the kind of content you wish to display in this way!
Basics: How the text scroll effect works
This text scroll effect can be achieved using simple CSS animation properties. To make text scroll horizontally on a webpage, we’ll add sample text in a container element and apply the transform:translateX() CSS property to the text as shown below ↓
The text is moved using transform:translateX() property inside a @keyframes animation. The animation starts with the text at 0% (initial position) and moves to -100% (text moves out of view to the left).
The scroll animation is applied using:
1
animation: scrollText 25s linear infinite;
scrollText is the name of the animation
25s is the duration of the animation
linear makes the scrolll speed consistent
inifinite means the animation will repeat forever
To scroll text vertically, we use transform:translateY property inside a @keyframe animation. In the next example, we have duplicated the text and made the container taller to accommodate the scrolling text.
How to create an infinite horizontal and vertical text scroll effect
Let’s combine all the tricks we have learned so far and create a stylish infinite vertical and horizontal text scroll effect.
HTML structure
In our HTML structure, we have separate containers for each scroll direction. The horizontal scroll will occupy the main content area while the vertical scroll will be in a sidebar. By the end of this tutorial, we will have something like this:
The HTML structure will look like this:
1
<div class="main-container">
Basics: How the text scroll effect works
This text scroll effect can be achieved using simple CSS animation properties. To make text scroll horizontally on a webpage, we’ll add sample text in a container element and apply the transform:translateX() CSS property to the text as shown below ↓
The text is moved using transform:translateX() property inside a @keyframes animation. The animation starts with the text at 0% (initial position) and moves to -100% (text moves out of view to the left).
The scroll animation is applied using:
1
animation: scrollText 25s linear infinite;
scrollText is the name of the animation
25s is the duration of the animation
linear makes the scrolll speed consistent
inifinite means the animation will repeat forever
To scroll text vertically, we use transform:translateY property inside a @keyframe animation. In the next example, we have duplicated the text and made the container taller to accommodate the scrolling text.
How to create an infinite horizontal and vertical text scroll effect
Let’s combine all the tricks we have learned so far and create a stylish infinite vertical and horizontal text scroll effect.
HTML structure
In our HTML structure, we have separate containers for each scroll direction. The horizontal scroll will occupy the main content area while the vertical scroll will be in a sidebar. By the end of this tutorial, we will have something like this:
The HTML structure will look like this:
1
<div class="main-container">
