Generate responsive horizontal timeline based on jQuery and CSS3 with source code download _ jquery

We often see a lot of vertical timelines used to record the progress of events, and some friends asked me to share the horizontal timeline, in fact, the difficulty of the horizontal timeline is adaptive screen size. So what I want to share with you today is a horizontal timeline that supports responsive and touch screen gesture sliding. we often see many vertical timelines used to record event progress, A friend asked me to share the horizontal timeline. In fact, the difficulty of the horizontal timeline lies in adaptive screen size. Today I want to share with you a horizontal timeline that supports responsive and touch-screen gesture sliding.

Download the effect display source code

HTML

Our HTML structure consists of two parts: p. timeline is used to place the horizontal line of the date navigation, which has horizontally multiple date p. the events-wrapper and horizontal axis navigation buttons ul. cd-timeline-navigation. P. events-content is placed on event nodes corresponding to multiple dates, which are composed of multiple li elements. any HTML content such as image text can be placed in the li element. Note that the data-date attribute is included in the li of the two parts of html, and its value is a date, the data-date attribute is used to associate the navigation horizontal line with the event content corresponding to the date.

   
  
   
  
    
  
     
  
 
      
   
  
16 Jan
      
   
  
28 Feb
      
        
  
 
         
  
 
     
  
 
     
  
 
    
   
  
Prev
    
   
  
Next
   
  
 
 
    
  
 
    
  
   
  
 
    
   
  
TitleJanuary 16th, 2014 
Arbitrary HTML content such as text or images
 
    
   
  
  
    
      
  
 
  
  
 
  

CSS

Looking at the css design of timeline events, all event nodes are initially in the view and cannot be seen except. selected currently selected date nodes. We use. enter-right /. enter-left to add an animation when the event node enters the view. leave-right /. leave-left to add an animation when the event node leaves the view. This example uses a lot of CSS3 animation effects. please refer to 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. in js, adjust the distance between two date nodes in the date navigation bar based on the interval between two dates. of course, you must set a minimum value (px) and obtain the date based on the data-date attribute, format the date. Using jQuery, click the left and right navigation buttons to slide the event content. because of the large amount of code, it will not take up space here. please download the source code to view main. the code details in js can be directly applied to your project without any modification.