Vertical Scroll Timeline With jQuery

Timeline
Vertical Scroll Timeline With jQuery
File Size: 2.1 KB
Views Total: 7303 views
Last Update:March 18, 2023
Publish Date: February 24, 2020
Official Website: Go to website
License: MIT
Plugin Author: Viktor
Demo    Download

Vertical Scroll Timeline is a jQuery Plugin to build a pretty awesome and unique animation effect in the scrollable box. Predominantly, it allows users to get a discreet scenario, while smooth scrolling, years spontaneously changed rather than to straight jump within the scrolling program via HTML and CSS. The functionality of this transition effect is quite modest and astonishing which helps to create insignificant results for this as well as displaying a series of effects in a responsive phase.

How To Use

1. Add Html code :

<nav class="timeline__nav">
  <ul>
      <li><span>1993</span></li>
  </ul>
</nav>

2. Add Target with section :

 <section class="timeline__section">
    <div class="wrapper">
      <h2 class="milestone">1993</h2>
    </div>
</section>

3. Add jQuery library and java Script :

<script type="text/javascript" src="jquery-1.12.4.min.js"></script> // or higher
<script type="text/javascript">
      $(() => {
  let stickyTop = 0,
  scrollTarget = false;

  let timeline = $('.timeline__nav'),
  items = $('li', timeline),
  milestones = $('.timeline__section .milestone'),
  offsetTop = parseInt(timeline.css('top'));

  const TIMELINE_VALUES = {
    start: 190,
    step: 30 };


  $(window).resize(function () {
    timeline.removeClass('fixed');

    stickyTop = timeline.offset().top - offsetTop;

    $(window).trigger('scroll');
  }).trigger('resize');

  $(window).scroll(function () {
    if ($(window).scrollTop() > stickyTop) {
      timeline.addClass('fixed');
    } else {
      timeline.removeClass('fixed');
    }
  }).trigger('scroll');

  items.find('span').click(function () {
    let li = $(this).parent(),
    index = li.index(),
    milestone = milestones.eq(index);

    if (!li.hasClass('active') && milestone.length) {
      scrollTarget = index;

      let scrollTargetTop = milestone.offset().top - 80;

      $('html, body').animate({ scrollTop: scrollTargetTop }, {
        duration: 400,
        complete: function complete() {
          scrollTarget = false;
        } });

    }
  });

  $(window).scroll(function () {
    let viewLine = $(window).scrollTop() + $(window).height() / 3,
    active = -1;

    if (scrollTarget === false) {
      milestones.each(function () {
        if ($(this).offset().top - viewLine > 0) {
          return false;
        }

        active++;
      });
    } else {
      active = scrollTarget;
    }

    timeline.css('top', -1 * active * TIMELINE_VALUES.step + TIMELINE_VALUES.start + 'px');

    items.filter('.active').removeClass('active');

    items.eq(active != -1 ? active : 0).addClass('active');
  }).trigger('scroll');
});
</script>
Thanks for make jQuery plugin is developed by Viktor For more Helpfull for users, please check the demo page or visit the official website.

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.