How to Create a Vertical Timeline with CSS and JavaScript

How to Create a Vertical Timeline with CSS and JavaScript

0 7590
Vertical Timeline with CSS and JavaScript

Vertical Timeline tutorial. Internet users love graphics that make it easier to digest information. Even more, they love interactive graphics that allow them to participate above and beyond just reading. Is it any wonder that vertical timelines do very well as a form of online content?
A vertical timeline can tell the story of your company and how it came to be. It could reveal the evolution of a product or service, discuss the history of a particular industry, or even walk your customers through the process by which you will provide your services. Best of all, you can create a 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 -->
<section id="cd-timeline" class="cd-container cssanimations">
<!-- single timeline event -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-picture">
<img src="event-calender.png" />
</div>
<div class="cd-timeline-content">
<h2>Event 1</h2>
<p>Event 1 Description </p>
<span class="cd-date">Sunday, 19 June 2016</span>
</div>
</div>
....
....
</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:

#cd-timeline {
position: relative;
padding: 2em 0;
margin-top: 2em;
margin-bottom: 2em;
}
#cd-timeline::before {
/* this is the vertical line */
content: '';
position: absolute;
top: 0;
height: 100%;
width: 4px;
background: #d7e4ed;
left: 50%;
margin-left: -2px;
}
.cd-container::after {
content: '';
display: table;
clear: both;
}
.cd-container {
width: 90%;
max-width: 1170px;
margin: 0 auto;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block {
position: relative;
margin: 4em 0;
}
.cd-timeline-content {
margin-left: 0;
padding: 1.6em;
width: 42%;
position: relative;
background: white;
border-radius: 0.25em;
padding: 1em;
box-shadow: 0 3px 0 #d7e4ed;
}
.cd-timeline-content .cd-date {
position: absolute;
width: 100%;
left: 122%;
top: 6px;
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
left: auto;
right: 122%;
text-align: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content {
float: right;
}
.cd-timeline-block:after {
content: "";
display: table;
clear: both;
}
.cd-timeline-img {
width: 60px;
height: 60px;
left: 50%;
margin-left: -30px;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.cd-timeline-img {
position: absolute;
top: 0;
border-radius: 50%;
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);
background: #105a8b;
}
.cd-timeline-img img,.cd-timeline-img svg {
display: block;
width: 24px;
height: 24px;
position: relative;
left: 50%;
top: 50%;
margin-left: -12px;
margin-top: -12px;
vertical-align: middle;
}
.cssanimations .cd-timeline-img.is-hidden,.cssanimations .cd-timeline-content.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-img.bounce-in,.cssanimations .cd-timeline-content.bounce-in {
visibility: visible;
animation: cd-bounce-1 0.6s;
}
@keyframes cd-bounce-1 {
0% {
opacity: 0;
transform: scale(0.5);
}
60% {
opacity: 1;
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

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 to style elements differently as they progress down the timeline. For example, you might want to make every other entry a different style in order to provide a means of distinguishing between them. Or, you may style different elements according to some predetermined category.

Add Your JavaScript

The last step in creating a vertical timeline is to add the JavaScript that will make the timeline interactive. How complicated you make this code depends on how you want your timeline to interact. For example, a very simple timeline that scrolls and doesn’t include any child items could be implemented with a very easy script.

To add JavaScript, firstly you will use jQuery library or write your own code. There are variegated ways to use jQuery, you can either
• Download the jQuery library from jQuery.com
‘or’
• Include jQuery from a CDN, like Google
<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:

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

With a little bit of CSS and JavaScript, you can create an interactive vertical timeline your visitors would surely appreciate. In the above code I used a customized bounce effect to give the timeline a more appealing look. Similarly, even you can use different elements to enhance the look of your vertical timeline.
Here’s the screenshot of the result that I got after applying the above-mentioned code:

Vertical Timeline with CSS and JavaScript

Hope the article would help you in creating your own vertical timeline with CSS and JavaScript effectually,
Good Luck!


Live Demo
Author Bio: Anurag Gupta shares the bracket with the rising entrepreneurs in the digital marketing industry. He has been instrumental in designing and implementing the digital marketing strategy for Weblinkindia.net one of the topmost Web Designing & Development Companies in India. His limited knowledge and experience, accumulated over the years, find a vent on several online platforms including this one.

SIMILAR ARTICLES

jQuery Mobile Lesson 6

0 45
jQuery Mobile Lesson 5

0 75

NO COMMENTS

Leave a Reply