Saturday, August 6, 2022
HomeWeb Design10 Cool Pure CSS Scrolling Text Animations

10 Cool Pure CSS Scrolling Text Animations


Scrolling text on a website is almost as old as the internet. You may remember the days when marquees with horizontal scrolling text were all the rage, and we (some of us) thought it was one of the coolest things we’d seen on a website. Many years later we have left that, along with a collection of other relatively silly “web tricks”, behind, as technology and web development evolved into what we have to work with today. Now we no longer need Flash or some other bulky, clunky tools or code to make this happen.

In this post, we’ll show you a collection of scrolling text animations that are coded with only CSS – no JavaScript or anything else needed! Let’s take a look at some of the different ways this fun effect can be accomplished.

UNLIMITED DOWNLOADS: 500,000+ WordPress & Design Assets

Sign up for Envato Elements and get unlimited downloads starting at only $16.50 per month!



4662?subId1=wordpress ipa 091620

 

Hidden & scrolling text

Not just vertically scrolling, but also hidden. Hover over the window to check 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 school looking it’s a little painful.

See the Pen
HTML <marquee> 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

Another marquee effect very similar to the “good old days”.

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

 

CSS3 Marquee

And yet another simple 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 different 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 combination 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 would 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.



Source link

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular