Vertical Timeline using HTML, CSS & JavaScript

0

Vertical Timeline using HTML, CSS & JavaScript

Hello developers, today in this blog, you’ll learn to create a Vertical Timeline using HTML, CSS & JavaScript. 

A timeline is a graphical representation or a chart that is listed with important events for successive years within a particular historical period.


In this program (Vertical Timeline), there is a vertical timeline where we have listed the events. The vertical timeline is navigated with a vertical line and moves vertically when you scroll it, this scrolling of the vertical timeline is made by using the scrollTop property in JavaScript. The CSS transform property has been used to make the timeline box rotate.


Every event is listed on the opposite side to the previous event one by one. Nowadays, in every sector, the timeline or a plan is very important and every website has its timeline to display a particular event. You can add more events as per your need.


The source code of this Vertical Timeline is given below, if you want the source code of this program, you can copy it. You can use this Vertical Timeline code on your projects.


Vertical Timeline [Source Code]


To make this website, you would like to make three files: an HTML file, a CSS file, and a JavaScript file. 


First, create an HTML file with the name of index.html and remember, you've to make a file with a .html extension.


<!DOCTYPE html> <html> <head> <title>Time line || Learning Robo</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="body"> <ul id="time-line"> <li> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h3>Learning Robo</h3> </p> </div> </li> <li> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h3>Learning Robo</h3> </p> </div> </li> <li> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h3>Learning Robo</h3> </p> </div> </li> <li> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h3>Learning Robo</h3> </p> </div> </li> <li> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h3>Learning Robo</h3> </p> </div> </li> <li> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h3>Learning Robo</h3> </p> </div> </li> <li> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h3>Learning Robo</h3> </p> </div> </li> <li> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h3>Learning Robo</h3> </p> </div> </li> <li> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h3>Learning Robo</h3> </p> </div> </li> <li> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h3>Learning Robo</h3> </p> </div> </li> <li> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h3>Learning Robo</h3> </p> </div> </li> <li> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h3>Learning Robo</h3> </p> </div> </li> <li> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h3>Learning Robo</h3> </p> </div> </li> <li> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h3>Learning Robo</h3> </p> </div> </li> <li> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h3>Learning Robo</h3> </p> </div> </li> </ul> </div> <script src="script.js"></script> </body> </html>

CSS provides style to an HTML page. To form the page attractive create a CSS file with the name style.css and remember that you've got to make a file with a .css extension. 


		.body{
            background-color: #e9e230;
            background-image: linear-gradient(132deg, #e9e230 0%, #53f19b 100%);
            
                  padding: 0;
                  margin: 0;
                  font-family: arial;
                 
              }
              ul#time-line{
                  padding: 50px 0;
                  margin: 0;
                  list-style-type: none;
                  position: relative;
                  overflow: hidden;
              }
              ul#time-line:after{
                  position: absolute;
                  content: '';
                  height: 100%;
                  width: 5px;
                  border-radius: 20px;
                  background: #303030;
                  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                  left: 0;
                  right: 0;
                  top: 0;
                  pointer-events: none;
                  margin: auto;
              }
              ul#time-line li{
                  width: 50%;
                  margin-left: auto;
                  text-align: left;
                  transition: all cubic-bezier(0.68,0.55,0.265,1.55) .5s;
                  transform: rotateX(90deg);
              }
              ul#time-line li:nth-child(2n){
                  margin-left: 0;
                  margin-right: auto;
                  text-align: right;
              }
              ul#time-line li div{
                  width: 70%;
                  display: inline-block;
                  background: #303030;
                  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                  padding: 30px;
                  margin: 20px;
                  border-radius: 30px;	
                  position: relative;
                  color: #fff;
              }
              ul#time-line li div:after{
                  content: '';
                  position: absolute;
                  left: auto;
                  right: 100%;
                  top: 45%;
                  border: solid 10px;
                  border-color: transparent #303030 transparent transparent;
              }
              ul#time-line li div:before{
                  content: '';
                  position: absolute;
                  height: 20px;
                  width: 20px;
                  background: #303030;
                  border-radius: 50%;
                  left: -30px;
                  top: 45%;
              }
              ul#time-line li:nth-child(2n) div:before{
                  right: -30px;
                  left: auto;
              }
              ul#time-line li:nth-child(2n) div:after{
                  left: 100%;
                  right: auto;
                  border-color: transparent transparent transparent #303030;
              }
              ul#time-line li.visibility {
                  transform: rotateX(0deg) perspective(360px);
              }


JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension. 


$('ul#time-line li').each(function(){ var stop = $(window).scrollTop() + $(window).height()/1.2; var litop = $(this).offset().top; if (stop > litop){ $(this).addClass('visibility'); } }); $(window).scroll(function(){ $('ul#time-line li').each(function(){ var stop = $(window).scrollTop() + $(window).height()/1.2; var litop = $(this).offset().top; if (stop > litop){ $(this).addClass('visibility'); } else{ $(this).removeClass('visibility'); }; console.log(litop+' - '+stop); }); });


We hope you would like this Vertical Timeline using HTML, CSS & JavaScript.


Thank you for reading our blog. If you face any problem in creating this Vertical Timeline using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

 

Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome