Share Your Story with These Terrific Timelines

When trying to get your point across to users, serving them up mountains of text just isn’t effective. People are looking for instant gratification and most won’t stick around to read long passages. We can better spark their interest through compelling visuals.

Timelines are among the more popular visual elements we have at our disposal. A good one can present a story in an easy-to-follow, and even interactive, manner. They can grab a user’s attention and invite them to participate in the experience.

And it’s no surprise that, as CSS and JavaScript are becoming ever more powerful, timelines are popping up all over the place. These technological advances mean easier implementation and a more compelling visual.

That gives us the perfect opportunity to share some top examples of timelines that are both attractive and engaging. Enjoy!

The Complete Toolbox for Web Designers
Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets

DOWNLOAD NOW

Bringing History into Focus

One potential pitfall of a content-heavy timeline is that all of its entries can get bunched together. This makes it difficult to give each item the focus it deserves. This example takes a unique approach, where each entry’s image is faded until it comes to the top of the viewport via scroll. Once that occurs, the image is fully realized, thus allowing the entry some time to shine.

See the Pen
timeline by Stefan Kyurkchiev.

Post Up

A timeline can be used to display all sorts of chronological or even categorized content. Here, this attractive date-based layout is used to list blog posts. The format is simple and easy to follow. It offers a different perspective on the standard vertical listing of posts.

See the Pen
Posts Timeline by Tracy.

Change Your View

Let’s look at another unique method for displaying lots of information in a limited space. What’s great about this example is how versatile it is. You can navigate via keyboard, drag or click. Then there is the ability to zoom in or out of the listings and to rewind things back the beginning. Not only does it look great, but it also gives users some choice in how they interact.

See the Pen
Centennial Timeline by Sean.

Look Behind the Door

Sometimes the most interesting examples are the ones that look nothing like you’d expect. We’ve come to see timelines as very linear, with text or images jutting out from a line of some sort. Here, not so much. Instead, we have a series of tall, skinny panels. Hovering over a panel reveals a full-color image and some text. Even more impressive is that it was all done with pure HTML and CSS.

See the Pen
WIE_ Box Slider (4 Panel Timeline CSS) by Alejandro Santacroce.

Learn as You Scroll

Scroll-based animations are kind of a big deal these days. And it makes perfect sense that some of the best timeline examples we found integrate them to some degree. This summary of the great Albert Einstein’s life features some slick animations, thanks to jQuery. It makes the user experience feel a bit more interactive and just flows along naturally with the content.

See the Pen
jQuery Scrollable timeline (Responsive design) by Stefan Tudoran.

Going In-Depth

At first glance, there doesn’t appear to be much behind this look at artists in Amsterdam. However, click on one of the artists and you’re taken to a page that features a second timeline displaying their works. The timeline format works beautifully here, complimenting the overall aesthetic.

See the Pen
Timeline of artists in Amsterdam by Mees.

The Beauty of Simplicity

There’s still much to be said for simple solutions. After all, not everything has to knock the user’s socks off. This Vue.js-based example isn’t overdone in the least. But what it does offer is an interactive way to navigate through a listing of important events. It’s fast, legible and intuitive. What more could you want?

See the Pen
Horizontal Timeline by Adhitama Fikri.

Top of the Charts

Finally, let’s explore another unexpected type of setup. This horizontal timeline is reminiscent of a chart or graph. Again, it’s very simplistic in design. But that also means that you won’t struggle to discern one entry from another, as each is on its own line. Text is also kept to a minimum, with hyperlinks being used to lead us to more information.

See the Pen
Horizontal Life Timeline by Milan Milošev.

All Kinds of Time

One thing the examples above show is that timelines can be incredibly versatile. They can be anything from a minimally formatted layout all the way to a fully-animated and interactive experience.

So, no matter the type of information you’re looking to display or your personal style, odds are that one of these snippets will be the perfect fit.

Looking for more examples? Check out our CodePen Collection!

The post Share Your Story with These Terrific Timelines appeared first on Speckyboy Design Magazine.

from Speckyboy Design Magazine https://speckyboy.com/css-js-timelines/

Share Your Story with These Terrific Timelines Find more on: www.instant-web-site-tools

source https://www.instant-web-site-tools.com/2019/06/19/share-your-story-with-these-terrific-timelines/