GOOCODE - Find your code/scripts

11 We often see a lot of progress in record events to the vertical axis, and a friend asked me asked to share the level of the timeline, in fact, the difficulty level of the timeline is adaptive screen size. Well, today I'm going to share with you is a responsive support, support touch gestures sliding horizontal time axis.


HTML
Our HTML structure consists of two parts, div.timeline date for placing the horizontal navigation, which has a plurality of horizontal and date div.events-wrapper around a horizontal axis direction navigation buttons ul.cd-timeline-navigation components. The div.events-content is placed in a plurality of nodes corresponding event date, it plurality of elements li, li element pictures and text can be placed inside any HTML content. Note that these two parts of the li html in both data-date attribute whose value is a date, it is through data-date attribute associated navigation level corresponding event date content.

<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 --> 
                </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>title</h2> 
                <em>January 16th, 2014</em> 
                <p>     
                    text or images and any other html contents 
                </p> 
            </li> 
  
            <li data-date="28/02/2014"> 
                <!-- description on the day --> 
            </li> 
  
            <!-- other date events --> 
        </ol> 
    </div> 
</section> 

CSS
css design of the timeline of events, all events are in addition to the initial node view, it is to see, in addition to the currently selected date .selected node. We use .enter-right / .enter-left to add animation to view when entering the event node, using .leave-right / .leave-left to add animation to leave the node view of the event. In this case the use of a lot of CSS3 animation effects, see the code:

.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%); 
  } 
} 

JS
In main.js, depending on the length of the interval between two dates each be adjusted from the date of the navigation bar on two dates nodes, of course, to set a minimum value (px), and the acquisition date in accordance with data-date attribute, and do date formatting process. Click around to use jQuery to achieve the navigation buttons to achieve sliding effect of the content of the event, due to the more specific code, not here to occupy the space, please download the source code view main.js in details, without any modification can take direct application to your project.