Example of a responsive horizontal timeline created by jQuery and CSS3

Source: Internet
Author: User
Tags prev wrapper

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.