Last Updated:

Responsive timeline for a jQuery site

The timeline makes it possible to visually organize the material on the site and present it to the visitor, we have previously published such lessons more than once, but today we want to show how you can make a simple and at the same time convenient and practical timeline. In addition, the timeline will be animated as you scroll through the page will add new materials flying up to the scale. Also, all this will be adaptive, which will allow you to correctly display on different devices with different screen resolutions.

To achieve the functions of such a scale, we need the jQuery plugin. A responsive, vertical, animated timeline plugin that glides when scrolling with eye-catching CSS3 animations. This plugin supports all types of multimedia, such as images, plain text, HTML5 videos and more.

Responsive timeline for a jQuery site

The vertical timeline automatically collapses into a card view when you work on a small screen (for example, on mobile and tablet devices). Let's get started. We used the following rules and libraries:

  • jQuery.
  • Bootstrap (for adaptive layout).
  • Font Awesome (for icons).
  • Animate.css (for simple animation).
  • Wow.js (to display animations as you scroll).

Step 1. HTML

To get started, load the necessary jQuery, Bootstrap, and font Awesome into the html document:

 

Next, we need to connect the style.css and javascript timeline.js table styles to our document:

 

Next, we add our stories to the timeline, we shortened it a bit for demonstration, you can see the full code in the sources for this tutorial:

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 item" >
<div class="caption">
<div class="star center-block">
<span class="h3">27</span>
<span>Jan</span>
<span>1990</span>
</div>
<div class="image">
<img src="img/born.jpg">
<div class="title">
<h2>Started to Breath <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></h2>
</div>
</div>
<div class="textContent">
<p class="lead">Текст.</p>
</div>
</div>
</div>

With the markup, it seems, figured out, let's move on to the next step, namely the initialization of the plugin.

Step 2. JS

To include the plugin to the desired page, we need to add the following code:

 

You can customize the timeline yourself, we have set the default settings as below, but you can easily change them:

$('.timeLine').timeLine({
myTimeLine: this
mainColor: '', //Timeline color
opacity: '0.5'
offset: '400'
itemAnimateDuration: 2,
lineColor: '#DDDDDD',
Left
RightAnimation: 'rotateInUpLeft',
});

As a result, we get such a wonderful timeline that you can easily activate and connect to your site to visually present information to the visitor.