Web Dev
EN
How to create infinite text scrolling in HTML, CSS, and JavaScript
['Esther Vaati']
Nettuts+
Basics: How the text scroll effect worksThis text scroll effect can be achieved using simple CSS animation properties.
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 effectLet’s combine all the tricks we have learned so far and create a stylish infinite vertical and horizontal text scroll effect.
Main CSS stylesFirstly, let’s remove the default spacing on the body, so set overflowX: hidden to prevent horizontal scrolling.
ConclusionIn this tutorial, we have used simple CSS properties to achieve horizontal and vertical text scroll effects.
['const'
'create'
'css'
'infinite'
'horizontal'
'textitem'
'javascript'
'scroll'
'div'
'html'
'star'
'vertical'
'scrolling'
'text'
'animation']