[Horizontal Timeline]#timeline #css #js #jquery

00 - Introduction.md

Horizontal Timeline - An easy to customize, horizontal timeline powered by CSS and jQuery.

separate timeline and events :

1. the first one working like a slider
2. the second one occupying the full width and showing a single event at a time

01 - Creating the HTML structure.md

The HTML structure = two main ordered lists:

1. the first one containing the timeline dates
2. the second one the events

ul.cd-timeline-navigation

• the navigation arrows

span.filling-line

• to create the filling effect when a new event is selected

<section class="cd-horizontal-timeline">
   <div class="timeline">
      <div class="events-wrapper">
         <div class="events">
            <ol>
               <li><a href="#0" data-date="16/01/2014" class="selected">16 Jan</a></li>
               <li><a href="#0" data-date="28/02/2014">28 Feb</a></li>
               <!-- other dates here -->
            </ol>

            <span class="filling-line" aria-hidden="true"></span>
         </div> <!-- .events -->
      </div> <!-- .events-wrapper -->

      <ul class="cd-timeline-navigation">
         <li><a href="#0" class="prev inactive">Prev</a></li>
         <li><a href="#0" class="next">Next</a></li>
      </ul> <!-- .cd-timeline-navigation -->
   </div> <!-- .timeline -->

   <div class="events-content">
      <ol>
         <li class="selected" data-date="16/01/2014">
            <h2>Horizontal Timeline</h2>
            <em>January 16th, 2014</em>
            <p> 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
            </p>
         </li>

         <li data-date="28/02/2014">
            <!-- event description here -->
         </li>

         <!-- other descriptions here -->
      </ol>
   </div> <!-- .events-content -->
</section>

02 - Adding style & Guidelines.md

Let's start from the events style:

• all the items are translated to the left, outside the viewport (translateX(-100%));
• the .selected class is added to the visible event item to move it back into the viewport (translateX(0))

4 classes have been used to create the slider animation:

1. the .enter-right/.enter-left classes added to the selected event item entering the viewport from right/left
2. the .leave-right/.leave-left classes added to the event item moving to the right/left while leaving the viewport.

These classes are used to apply two different CSS animations:

1. cd-enter-right (for the .enter-right and .leave-left class)
2. cd-enter-left (for the .enter-left and .leave-right class)

.cd-horizontal-timeline .events-content {
  position: relative;
}
.cd-horizontal-timeline .events-content li {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  opacity: 0;
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
}
.cd-horizontal-timeline .events-content li.selected {
  /* visible event content */
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right, 
.cd-horizontal-timeline .events-content li.leave-right {
  animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left, 
.cd-horizontal-timeline .events-content li.leave-left {
  animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right, 
.cd-horizontal-timeline .events-content li.leave-left {
  animation-direction: reverse;
}
@keyframes cd-enter-right {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes cd-enter-left {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}