vertical timeline – An easy to customize, responsive timeline.

2014-10-31 • Plugins • Views: 1609

Today’s resource is an easy to customize, responsive timeline. We used some CSS3 tricks and a bit of jQuery to create some bounce animations that affect desktop users only, while on mobile the structure is more minimal.

We all are quite familiar with vertical timelines: all instant messaging applications use them. A current trend in web design is to use a similar structure, but to show a process rather than a sequence of events. That is why timeline-like structures are often used for the “How it works” page.

The inspiration for this nugget came from the Zurb University page.  The result is very clean yet dynamic, with room for big illustrations in the center.




Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>