CSS3 based on jquery and the production of responsive horizontal time axis source download _jquery

We often see a lot of vertical timeline to record the progress of events, and some friends ask me to share the horizontal timeline, but the difficulty of the horizontal timeline is the adaptive screen size. So what I'm going to share today is a horizontal timeline that supports response, and supports touch-screen gesture sliding.

Effect Display source Download

Html

Our HTML structure is made up of two parts, Div.timeline is used to place the date navigation horizontal line, it has the horizontal multiple date div.events-wrapper and the horizontal axis the left and right direction navigation button ul.cd-timeline-navigation. And Div.events-content placed is a number of dates corresponding to the event node, it is composed of several Li elements, Li elements can be placed inside the image text, such as arbitrary HTML content. Note that both parts of the HTML Li have the Data-date attribute, whose value is a date, and it is through the Data-date attribute that the navigation horizontal line corresponds to the event content of the date.

<section class= "Cd-horizontal-timeline" > <div class= "Timeline" > <div class= "Events-wrapper" > & Lt;div class= "Events" > <ol> <li><a href= "#0" data-date= "16/01/2014" class= "selected" >16 Ja  n</a></li> <li><a href= "#0" data-date= "28/02/2014" >28 feb</a></li> <!-- Multiple dates--> </ol> <span class= "Filling-line" aria-hidden= "true" ></span> </div> < !--. Events--> </div> <!--. events-wrapper--> <ul class= "Cd-timeline-navigation" > <li& Gt;<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" >  

Css

To see the timeline event CSS design, all the event nodes are initially outside the view, is not visible, except. Selected the currently selected date node. We use. Enter-right/.enter-left to animate an event node when it enters a view, and use. Leave-right/.leave-left to add animations when the event node leaves the view. This example uses a lot of CSS3 animation effects, see 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 {ani 
Mation-name:cd-enter-right; Cd-horizontal-timeline. Events-content li.enter-left,. Cd-horizontal-timeline. events-content Li.leave-left {Anima 
Tion-name:cd-enter-left; Cd-horizontal-timeline. Events-content li.leave-right,. Cd-horizontal-timeline. events-content Li.leave-left {Anim 
Ation-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 of two date nodes on the date navigation bar based on the length of interval between each two dates, and of course set a minimum (PX) and obtain a date based on the Data-date property, and format the date. Use jquery to achieve the click of the right and left navigation button to achieve the sliding effect of the event content, the specific code because more, it is not occupied space here, please download the source view main.js code details, do not make any changes can be directly used to apply to your project.