10 Cool Pure CSS Scrolling Text Animations

Scrolling text on a website is nearly as old as the web. It’s possible you’ll remember the times when marquees with horizontal scrolling text were all the fad, and we (a few of us) thought it was certainly one of the good things we’d seen on a website. A few years later we’ve got left that, together with a group of other relatively silly “web tricks”, behind, as technology and web development evolved into what we’ve got to work with today. Now we not need Flash or another bulky, clunky tools or code to make this occur.

On this post, we’ll show you a group of scrolling text animations which can be coded with only CSS – no JavaScript or anything needed! Let’s take a take a look at a few of the alternative ways this fun effect will be completed.

UNLIMITED DOWNLOADS: 500,000+ WordPress & Design Assets

Enroll for Envato Elements and get unlimited downloads starting at only $16.50 monthly!



 

Hidden & scrolling text

Not only vertically scrolling, but in addition hidden. Hover over the window to envision out this effect.

See the Pen
Hidden & scrolling text
by Avaz Bokiev (@samarkandiy)
on CodePen.0

 

Breaking News Modal

A slow horizontal scrolling effect for breaking news.

See the Pen
Breaking News Scrolling Text Modal
by KB (@notkieran)
on CodePen.0

 

Vertical scrolling word

A clean, smooth animation replacing a word in a line of text.

See the Pen
Vertical scrolling text
by Azri Kahar (@azrikahar)
on CodePen.0

 

HTML marquee Tag

This one is so old fashioned looking it’s just a little painful.

See the Pen
HTML Tag by Erna Ayuning Nareswari (@ashavenger)
on CodePen.0

 

Scrolling In A Window

A rotating words vertical scrolling effect.

See the Pen
Scrolling Text Window
by Andretti Brown (@andrettibrown)
on CodePen.0

 

Horizontal scrolling animation

One other marquee effect very much like the “good old days”.

See the Pen
Horizontal scrolling animation
by VERDIEU Steeve (@flatpixels)
on CodePen.0

 

CSS3 Marquee

And one more easy marquee effect.

See the Pen
CSS3 Marquee
by Svetlin Yankulov (@Yankulov)
on CodePen.0

 

Moving Text – CSS Animation Setup w/ Marquee Tag

Multiple lines scrolling horizontally in several speeds and directions.

See the Pen
Moving Text – CSS Animation Setup w/ Marquee Tag
by Chris Drinkut (@ChrisDrinkut)
on CodePen.0

 

Vertical Text Scroll

A mixture of some previous examples, this one rotates through words vertically scrolling into view.

See the Pen
Vertically-scrolling Text
by Matt Soria (@poopsplat)
on CodePen.0

 

Star Wars 3D Intro in CSS3

No collection could be complete without the Star Wars intro scrolling!

See the Pen
Star Wars 3D Intro in CSS3
by Scott Bram (@scottbram)
on CodePen.0

 

This post may contain affiliate links. See our disclosure about affiliate links here.

Leave a Reply

Your email address will not be published. Required fields are marked *