Responsive Animated Timeline With JavaScript And CSS3

Category: Date & Time , Javascript | June 14, 2016
Author: tutsplus
Views Total: 6,063
Official Page: Go to website
Last Update: June 14, 2016
License:

Preview:

Responsive Animated Timeline With JavaScript And CSS3

Description:

This is a simple, responsive timeline where the event nodes will slide smoothly into the screen on vertical page scrolling.

How to use it:

Add your custom events to the timeline using html unordered list and time tag.

<section class="timeline">
  <ul>
    <li>
      <div>
        <time>2016</time>
        Event Here
      </div>
    </li>
    <li>
      <div>
        <time>2015</time>
        Event Here
      </div>
    </li>
    <li>
      <div>
        <time>2014</time>
        Event Here
      </div>
    </li>
  </ul>
</section>

The primary CSS styles for the timeline.

.timeline ul {
  background: #1B9AAA;
  padding: 50px 0;
}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #fff;
}

.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  background: #F45B69;
}

.timeline ul li div::before {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ul li:nth-child(odd) div { left: 45px; }

.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #F45B69 transparent transparent;
}

.timeline ul li:nth-child(even) div { left: -439px; }

.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #F45B69;
}

time {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}

The animation effects for the event when you scroll down the webpage.

.timeline ul li::after { transition: background .5s ease-in-out; }

.timeline ul li.in-view::after { background: #F45B69; }

.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}

.timeline ul li:nth-child(odd) div { transform: translate3d(200px, 0, 0); }

.timeline ul li:nth-child(even) div { transform: translate3d(-200px, 0, 0); }

.timeline ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1;
}

Make the timeline work well across browsers and platforms.

@media screen and (max-width: 900px) {

.timeline ul li div { width: 250px; }

.timeline ul li:nth-child(even) div { left: -289px; /*250+45-6*/
}
}

@media screen and (max-width: 600px) {

.timeline ul li { margin-left: 20px; }

.timeline ul li div { width: calc(100vw - 91px); }

.timeline ul li:nth-child(even) div { left: 45px; }

.timeline ul li:nth-child(even) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #F45B69 transparent transparent;
}
}

The main JavaScript to active the timeline.

(function() {

  'use strict';

  // define variables
  var items = document.querySelectorAll(".timeline li");

  // check if an element is in viewport
  // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
  function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

  function callbackFunc() {
    for (var i = 0; i < items.length; i++) {
      if (isElementInViewport(items[i])) {
        items[i].classList.add("in-view");
      }
    }
  }

  // listen for events
  window.addEventListener("load", callbackFunc);
  window.addEventListener("resize", callbackFunc);
  window.addEventListener("scroll", callbackFunc);

})();

 

You Might Be Interested In:


One thought on “Responsive Animated Timeline With JavaScript And CSS3

  1. Mike

    Hi, i tried your timeline and was very happy with it. Might be a bit old topic to ask, but i’d need to change color of one single “ball” on the timeline, while coloring the rest on another color, cannot get it right, any advice?

    Reply

Leave a Reply