Text Trail Effect

A text trail effect for a slideshow inspired by the "Abstract is hiring" Dribbble shot.
TextTrailEffect_featured

From our monthly sponsor: Ship customer-facing metrics fast with Keen.io. Collect, store, query, & display stunning analytics.

Today we’d like to share a little text effect for a slideshow with you. It’s based on the animation seen in the Dribbble shot Abstract is hiring. The idea is to show a trail of a text when transitioning between slides of a slideshow. The animations are made using TweenMax.

Attention: Note that this is very experimental and that we use modern CSS properties that might not be supported in older browsers.

We’ve created five demos with different typography and effects for the images as we go from one slide to another. 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.

TextTrailEffect_01

TextTrailEffect_02

TextTrailEffect_03

TextTrailEffect_04

TextTrailEffect_05

We hope you enjoy this effect and find it useful!

References and Credits

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.