CSS Trailing Title Effect

Written by
Typical Read
2 minutes

Here’s a radical text effect from Mary Lou over at Codrops. It’s a great CSS trailing title effect seen in old 80’s movies and inspired by the animation seen in the Dribbble shot Abstract is hiring.

CSS Trailing Title Effect

Important: This effect uses experimental modern CSS properties that might not be supported in older browsers.

Codrop’s CSS Trailing Title Effect

The text trail layout is made by using a flexbox container that will make the height of each text container shrink so that all fit into the viewport (height). Some of the texts will be visible in full height (we set them specifically to flex: none). Using blend modes and rotations also creates an interesting look.

Text Trail Effect by Codrops

This effect is possible thanks to modern CSS properties like flexbox, viewport sizing and the TweenMax JS library. It’s important to keep in mind this effect will only work on modern browsers. It uses highly experimental modern CSS properties that older browsers like IE might have issues with — but really, who uses IE now-days?!

Modern CSS Properties for the Win!

Check out some of these other cool CSS effects using modern techniques:

Did you find this useful?

It’s a really cool effect — no doubt. With all fancy UI things, I ask myself is it useful? Does it provide a benefit to the end user, help convey information in an interesting and informative way? Maybe. The answer depends on the project. I’d love to hear how others have used the CSS trailing title effect in their projects or what they think about it in the comments below.

Article References & Credits

Join the conversation.

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

All comments posted on 'CSS Trailing Title Effect' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.