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.
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:
- Modern cursor trails that are completely customizable with CSS (also see, Sparkle Trail and Dust Cursor)
- CSS text glitch effect with no JavaScript
- Great article on using multi-step animations and transitions
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
- Article shared from Codrops
- Images from Unsplash.com
- imagesLoaded JS library by Dave DeSandro
- TweenMax JS library by Greensock
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.