Alternate text with CSS (and not) only!

Well, I’m in the theming development again, and I want my customer to be wondered by special FX, in this case alternating text, something like a slider but that changes only the text, or part of it.

Some examples taken from codepen

If you want to alternate a part of the text like it is sliding down, here’s a way to do that, only CSS, no javascript.

See the Pen Animated Flip Text by Satveer Singh Randhawa (@randhawa) on CodePen.

This one flips the text and as it flips it changes the phrase, this one does use javascript, still seems to be very lightweight.

See the Pen JavaScript Flip Text by Alex (@alexpopovich) on CodePen.

This one uses coffeescript, so not sure if I’ll ever use it.. but still, it looks cool.

See the Pen 3D Flipping Text by Hamish Macpherson (@hamstu) on CodePen.

This is quite interesing, as it uses only CSS to do the typing effect text alternate.

See the Pen Typewriter effect with alternating text (CSS3) by Valentyn Vasylenko (@vasylenkoval) on CodePen.

Posted in Code Tricks, Theming, Web Development and tagged , , , .

One Comment

  1. Pingback: Home made text slider | Digital KI

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.