Vertical Timeline with CSS and JavaScript

Image result for bit of CSS and JavaScript.How to Create a Vertical Timeline with CSS and JavaScript Vertical axis tutorial. Users love the graphics that make it easier for people to digest the information . Moreover , they love the interactive graphics to enable them to participate beyond just reading . It is no wonder vertical timeline to do very well in the form of online content ? Vertical timeline can tell your company ‘s story , and how it came to be. It can reveal the evolution of the product or service , to discuss the history of a particular industry , or even through the process in which you will go to provide your service to your customers. The most important is that you can create your own website , and vertical CSS and JavaScript schedule a little bit .vertical timeline on your own website with a little:

bit of CSS and JavaScript.

The point of this blog post is to give you a basic understanding of how you can do so. We will include some examples of code. However, you will not find a detailed implementation of code you can simply cut and paste. To make this work, you have to have a working knowledge of both CSS and JavaScript. By the way, lots of developers choose JavaScript for this sort of thing because it is so easy to use.

Start with the HTML:

The HTML mark-up on your web page provides the content for your timeline. You will create this content the same way you would for any other kind of content. Below is the sample code:

 <!-- main timeline section -->
<pre>02<section id="cd-timeline" class="cd-container cssanimations">
03
  <!-- single timeline event -->
04

<div class="cd-timeline-block">
05
<div class="cd-timeline-img cd-picture">
06
      <img src="event-calender.png" />
07
    </div>
08
<div class="cd-timeline-content">
09
<h2>Event 1</h2>
10
Event 1 Description 

11
      <span class="cd-date">Sunday, 19 June 2016</span>
12
    </div>
13
  </div>
14
  ....
15
  ....
16
</section>

The example above allows for a single event on your timeline. Obviously, you will be adding multiple events – otherwise, you wouldn’t have a timeline! Just insert additional events by copying between lines three and eight of code, modifying them accordingly, and pasting them between lines eight and nine. Do it for as many events as you want to add to your timeline.

Style Your Timeline

You could style your timeline using standard HTML mark-up, but that is extremely time-consuming and rather redundant. It is better to use CSS styles instead. Below is some sample code for the base CSS style; you will have to style your individual elements with separate code:

001
#cd-timeline {
002
  position: relative;
003
  padding: 2em 0;
004
  margin-top: 2em;
005
  margin-bottom: 2em;
006
}
007
#cd-timeline::before {
008
  /* this is the vertical line */
009
  content: '';
010
  position: absolute;
011
  top: 0;
012
  height: 100%;
013
  width: 4px;
014
  background: #d7e4ed;
015
  left: 50%;
016
  margin-left: -2px;
017
}
018
.cd-container::after {
019
  content: '';
020
  display: table;
021
  clear: both;
022
}
023
.cd-container {
024
  width: 90%;
025
  max-width: 1170px;
026
  margin: 0 auto;
027
}
028
.cd-timeline-block:first-child {
029
  margin-top: 0;
030
}
031
.cd-timeline-block {
032
  position: relative;
033
      margin: 4em 0;
034
}
035
.cd-timeline-content {
036
  margin-left: 0;
037
  padding: 1.6em;
038
  width: 42%;
039
  position: relative;
040
  background: white;
041
  border-radius: 0.25em;
042
  padding: 1em;
043
  box-shadow: 0 3px 0 #d7e4ed;
044
}
045
.cd-timeline-content .cd-date {
046
  position: absolute;
047
  width: 100%;
048
  left: 122%;
049
  top: 6px;
050
  font-size: 16px;
051
  font-size: 1rem;
052
}
053
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
054
  left: auto;
055
  right: 122%;
056
  text-align: right;
057
}
058
.cd-timeline-block:nth-child(even) .cd-timeline-content {
059
  float: right;
060
}
061
.cd-timeline-block:after {
062
  content: "";
063
  display: table;
064
  clear: both;
065
}
066
.cd-timeline-img {
067
  width: 60px;
068
  height: 60px;
069
  left: 50%;
070
  margin-left: -30px;
071
  -webkit-transform: translateZ(0);
072
  -webkit-backface-visibility: hidden;
073
}
074
.cd-timeline-img {
075
  position: absolute;
076
  top: 0;
077
  border-radius: 50%;
078
  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
079
  background: #105a8b;
080
}
081
.cd-timeline-img img,.cd-timeline-img svg {
082
  display: block;
083
  width: 24px;
084
  height: 24px;
085
  position: relative;
086
  left: 50%;
087
  top: 50%;
088
  margin-left: -12px;
089
  margin-top: -12px;
090
  vertical-align: middle;
091
}
092
.cssanimations .cd-timeline-img.is-hidden,.cssanimations .cd-timeline-content.is-hidden {
093
  visibility: hidden;
094
}
095
.cssanimations .cd-timeline-img.bounce-in,.cssanimations .cd-timeline-content.bounce-in {
096
  visibility: visible;
097
  animation: cd-bounce-1 0.6s;
098
}
099
  
100
@keyframes cd-bounce-1 {
101
  0% {
102
    opacity: 0;
103
    transform: scale(0.5);
104
  }
105
  
106
  60% {
107
    opacity: 1;
108
    transform: scale(1.2);
109
  }
110
  
111
  100% {
112
    transform: scale(1);
113
  }
114
}

You can style the elements of your timeline in whatever way you like. You will use the corresponding CSS rules relating to:

  • position
  • bottom
  • width
  • height
  • padding
  • background
  • border style
  • Some Web developers prefer a different style elements , as they progress down a timetable . For example , you might want to let each other into the different styles in order to provide a means to distinguish between them. Alternatively, you can book a number of different styles of elements according to the class .Add your JavaScript
    Create a vertical timeline of the last step is to add the JavaScript, which will allow interactive timeline . How complex you make this code depends on whether you want your schedule to interact. For example , a very simple timeline , scrolling , and does not include any sub can use a very simple script.
    To add JavaScript , first you will use the jQuery library or write your own code . There are variegated with jQuery way you can
    • Download the jQuery library from jQuery.com
    ‘ Either ‘
    • including from CDN, like Google ‘s jQuery

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

After adding the jQuery library, you will work on making your timeline’s Event more interactive:

 

1
$(window).on('scroll', function(){
2
  $('.cd-timeline-block').each(function(){
3
    if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) {
4
      $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
5
    }
6
  });
7
});

Use a little bit of CSS and JavaScript , you can create an interactive longitudinal axis of your visitors will certainly appreciate. In the above code I am using rebound effect from the definition to schedule a more attractive appearance. Similarly , even if you can use the different elements of the vertical axis to enhance your appearance. Here is a screenshot I will post the code above the results obtained:

Vertical Timeline with CSS and JavaScript

I hope this article helps you create CSS and JavaScript to create your own vertical schedule effectively , good luck!