Timeline v2

In this example below you will see how to do a Timeline v2 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by q51, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright q51 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Timeline v2</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id='timeline'>
  <div id='timeline-line'>
    &nbsp;
  </div>
  <div class='entry'>
    <h3>Lorem ipsum</h3>
    <p>dolor sit amet, consectetur adipiscing elit. Suspendisse blandit, nibh id luctus pretium, arcu magna faucibus nulla, ac cursus mi ante a felis. Nam tortor nisi, pretium non blandit eu, bibendum posuere elit. In sed ipsum vitae enim porttitor tristique. Proin nec orci eget odio vestibulum molestie. Fusce sit amet nulla mattis, tincidunt justo id, pharetra sem. Ut orci nibh, maximus vel tempor ut, dignissim sed justo. Nulla facilisi. Ut dapibus, nisi a efficitur mollis, erat eros tempor lectus, et maximus nibh eros at erat. Sed eget orci risus.</p>
  </div>
  <div class='entry'>
    <h3>Lorem ipsum dolor sit amet</h3>
    <p>consectetur adipiscing elit. Suspendisse blandit, nibh id luctus pretium, arcu magna faucibus nulla, ac cursus mi ante a felis. Nam tortor nisi, pretium non blandit eu, bibendum posuere elit. In sed ipsum vitae enim porttitor tristique. Proin nec orci eget odio vestibulum molestie. Fusce sit amet nulla mattis, tincidunt justo id, pharetra sem. Ut orci nibh, maximus vel tempor ut, dignissim sed justo. Nulla facilisi. Ut dapibus, nisi a efficitur mollis, erat eros tempor lectus, et maximus nibh eros at erat. Sed eget orci risus.</p>
  </div>
  <div class='entry'>
    <h3>Lorem ipsum dolor</h3>
    <p>sit amet, consectetur adipiscing elit. Suspendisse blandit, nibh id luctus pretium, arcu magna faucibus nulla, ac cursus mi ante a felis. Nam tortor nisi, pretium non blandit eu, bibendum posuere elit. In sed ipsum vitae enim porttitor tristique. Proin nec orci eget odio vestibulum molestie. Fusce sit amet nulla mattis, tincidunt justo id, pharetra sem. Ut orci nibh, maximus vel tempor ut, dignissim sed justo. Nulla facilisi. Ut dapibus, nisi a efficitur mollis, erat eros tempor lectus, et maximus nibh eros at erat. Sed eget orci risus.</p>
  </div>
  <div class='entry'>
    <h3>Lorem ipsum dolor sit amet, consectetur</h3>
    <p>adipiscing elit. Suspendisse blandit, nibh id luctus pretium, arcu magna faucibus nulla, ac cursus mi ante a felis. Nam tortor nisi, pretium non blandit eu, bibendum posuere elit. In sed ipsum vitae enim porttitor tristique. Proin nec orci eget odio vestibulum molestie. Fusce sit amet nulla mattis, tincidunt justo id, pharetra sem. Ut orci nibh, maximus vel tempor ut, dignissim sed justo. Nulla facilisi. Ut dapibus, nisi a efficitur mollis, erat eros tempor lectus, et maximus nibh eros at erat. Sed eget orci risus.</p>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/q51/timeline-v2-mLWMJm */
body {
  width: 400px;
  margin: auto;
  padding-top: 400px;
  padding-bottom: 400px;
  font-family: sans-serif;
  font-size: 0.8em;
  line-height: 1.5em;
}

#timeline {
  border-left: 5px solid #eee;
  position: relative;
}
#timeline .entry {
  padding-left: 20px;
  padding-bottom: 5em;
  position: relative;
  color: #ccc;
  transition: 0.2s;
}
#timeline .entry::after {
  content: "";
  width: 21px;
  height: 21px;
  background: #eee;
  border-radius: 100%;
  position: absolute;
  display: inline-block;
  left: -16px;
  top: 0;
  transition: 0.5s;
  box-shadow: 0px 0px 0px 0px white;
  border: 0px solid transparent;
  margin-left: 3px;
  margin-top: -4px;
}
#timeline .entry:first-of-type {
  padding-top: 0;
}
#timeline .entry:first-of-type::after {
  top: 0;
}
#timeline .entry.active {
  color: #000;
}
#timeline .entry.active::after {
  background: #22dd22;
  box-shadow: 0px 0px 0px 4px white inset;
  border-radius: 100%;
  border: 4px solid #22dd22;
  left: -17px;
  margin-left: 0px;
  margin-top: -7px;
}
#timeline .entry.was-active {
  color: #333;
}
#timeline .entry.was-active::after {
  background: #22dd22;
}
#timeline .entry h3 {
  margin-top: 0;
}
#timeline #timeline-line {
  border-left: 5px solid #22dd22;
  height: 0px;
  position: absolute;
  left: -5px;
  top: 1px;
}


/*Downloaded from https://www.codeseek.co/q51/timeline-v2-mLWMJm */
$( document ).ready(function() {
    //on ready, set first pip as active
    //$('#timeline .entry').first().addClass('active');
    //on scroll, check what's above the half-way point on the viewport
    //first, get and cache the viewport size
    var vw = $( window ).innerWidth();
    var vh = $( window ).innerHeight();
    //console.log (vw);
    //console.log (vh);
    // refresh these on resize!
    $( window ).resize(function(){
      vw = $( window ).innerWidth();
      vh = $( window ).innerHeight();
    });
    $( window ).scroll(function(){
      //check each entry for its position relative to the viewport
      $('.entry').each(function(){
        var offsetTop = $(this).offset();
        var windowScrollTop = $(window).scrollTop();
        // console.log(offsetTop.top);
        // console.log(windowScrollTop)
        //Check if it's passed 50%
        var ViewCheck = offsetTop.top - (windowScrollTop+(vh/2));
        // console.log(ViewCheck);
        if (ViewCheck < 0){
           //Add/remove classes as needed
          $(this).addClass('active').removeClass('was-active').prev().addClass('was-active').removeClass('active');
        } else {
          $(this).removeClass('active was-active').next().removeClass('active was-active'); 
        }
        
        //adjust the height of the timeline
        var timeline = $('#timeline-line')
        var timelineHeight = $('#timeline').innerHeight();
        var timelineOffset = timeline.offset();
        if (windowScrollTop+(vh/2) > timelineOffset.top && windowScrollTop+(vh/2) < timelineOffset.top + timelineHeight){
          var height = windowScrollTop+(vh/2) - timelineOffset.top;
          $(timeline).css('height', height);
          console.log(height);
        };
      })
    })
});

Comments