Example of a responsive horizontal timeline created by jQuery and CSS3

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.

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.

The code is as follows:

<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>
<!--multiple 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" >
<em>january 16th, 2014</em>
<p>
Arbitrary HTML content such as text or pictures
</p>
</li>

<li data-date= "28/02/2014" >
<!--event description information for the corresponding date-->
</li>

<!--multiple Date events-->
</ol>
</div>
</section>

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:

The code is as follows

. 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, adjust the distance between two dates on the date navigation bar, set a minimum value (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.