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

Source: Internet
Author: User
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.

   
  

  1. 16 Jan
  2. 28 Feb

  • Prev
  • Next

  1. 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.

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.