CSS Trailing Title Effect

Published
Updated
Typical Read
2 minutes
Sponsored
Help support open-source projects & pro-bono non-profit services by donating today.
Find your next web developer job
jobs by Indeed

CSS Trailing Title Effect was originally published on Jun 18, 2019 and has recently been updated on Aug 6, 2020 to reflect emerging trends.

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

Did you find CSS Trailing Title Effect useful? Get articles in your inbox.

…and don’t worry, I hate spam as much as you. Expect to hear from me at most once a week.

Latest Job Postings
Posted on Aug 9, 2020 at 9:17pm
Full-time
Los Angeles
Posted on Aug 9, 2020 at 9:15pm
Full-time
Los Angeles
Posted on Aug 8, 2020 at 4:57pm
Full-time
Los Angeles
Sponsored
Help support open-source projects & pro-bono non-profit services by donating today.
Sponsored
Sponsor my site by donating to help support open-source projects, like WordPress Zero Spam, Referrer Analytics & others.
Sponsored
Do you run a development agency, freelance developer or offer website services. Contact me today for information about advertising.
Sponsored
Do you have a great article to share you want to contribute? Contact me about your idea.
Sponsored
Do you run a development agency, freelance developer or offer website services. Contact me today for information about advertising.

Leave a Reply

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.