Responsive Vertical Timeline With jQuery and CSS3

An extremely lightweight jQuery plugin which lets you create a responsive, animated, vertical timeline widget with plain Html markups. Supports all the modern browsers which support CSS3 transitions and media queries.

How to use it:

1. Load the required cntl.css in the head section of the document.

<link rel="stylesheet" href="lib/cntl.css">

2. Load the jquery.cntl.js script after jQuery library.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="lib/jquery.cntl.js"></script>

3. Add your events to the timeline following the markup structure as shown below.

<div class="cntl">

  <span class="cntl-bar cntl-center">
    <span class="cntl-bar-fill"></span>
  </span>

  <div class="cntl-states">

    <div class="cntl-state">
      <div class="cntl-content">
        <h4>Event 1</h4>
        <p>Description 1.</p>
      </div>
      <div class="cntl-icon cntl-center">Date/Time</div>
    </div>

    <div class="cntl-state">
      <div class="cntl-content">
        <h4>Event 2</h4>
        <p>Description 2.</p>
      </div>
      <div class="cntl-icon cntl-center">Date/Time</div>
    </div> 
    
    <div class="cntl-state">
      <div class="cntl-content">
        <h4>Event 3</h4>
        <p>Description 3.</p>
      </div>
      <div class="cntl-icon cntl-center">Date/Time</div>
    </div>

    ...

  </div>

</div>

4. Initialize the plugin on the parent element and done.

$(document).ready(function(e){

$('.cntl').cntl({

// The amount of "scroll padding" to allow 
// The more, the later the state will be revealed
revealbefore: 300,

// The animate class
// This class should have animation rules in css
anim_class: 'cntl-animate',

// A callback once the state has been revealed
onreveal: null

});

});

---

This awesome jQuery plugin is developed by ChubbyNinja. For more Advanced Usages, please check the demo page or visit the official website.