Create a 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 a friend asked me to share a horizontal timeline. In fact, the difficulty with the horizontal timeline is that it adapts to the screen size. So what I want to share with you today is a horizontal timeline that supports responsiveness and touch screen gesture sliding.

Effect display Source code download

HTML

Our HTML structure consists of two parts. div.timeline is used to place date navigation horizontal lines. It consists of horizontal multiple dates div.events-wrapper and horizontal axis left and right navigation buttons ul.cd-timeline-navigation. The div.events-content places event nodes corresponding to multiple dates. It is composed of multiple li elements. Any HTML content such as pictures and text can be placed in the li element. Note that there is a data-date attribute in the li of these two parts of HTML. Its value is a date. It is through the data-date attribute that the navigation horizontal line is associated with the event content corresponding to the date.

<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> 
     <!-- 多个日期 --> 
    </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>标题</h2> 
    <em>January 16th, 2014</em> 
    <p>  
     文字或者图片等任意HTML内容 
    </p> 
   </li> 
   <li data-date="28/02/2014"> 
    <!-- 对应日期的事件描述信息 --> 
   </li> 
   <!-- 多个日期事件 --> 
  </ol> 
 </div> 
</section> 

CSS

Looking at the CSS design of timeline events, all event nodes are initially outside the view and cannot be seen, except for the currently selected date node of .selected. We use .enter-right/.enter-left to add animation when the event node enters the view, and use .leave-right/.leave-left to add animation when the event node leaves the view. This example uses a lot of CSS3 animation effects, please 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, adjust the distance between the two date nodes on the date navigation bar based on the length of the interval between each two dates. Of course, you must set a minimum value (px) and get the date based on the data-date attribute. , and format the date. Use jQuery to realize the sliding effect of event content by clicking on the left and right navigation buttons. Since the specific code is relatively large, it will not take up space here. Please download the source code to view the code details in main.js. You can directly apply it without making any modifications. Go to your project.