Fullpage Parallax Scrolling with Side Navigation Using jQuery

A jQuery & CSS3 powered fullpage parallax scrolling effect that comes with a side dots navigation that indicates which content section you're viewing on and allows you to scroll the webpage to specific point.

How to use it:

1. Create a list of navigation dots with anchor tags that point to different content sections within the document.

<div class="nav">
  <ul class="dot-nav">
    <li>
      <a href="#one" class="active" scroll-data="one"></a>
      <span><b>Section One</b>
      Test Heading here</span>
    </li>
    <li>
      <a href="#two" scroll-data="two"></a>
      <span><b>Section Two</b>
      Subtitle</span>
    </li>
    <li>
      <a href="#three" scroll-data="three"></a>
      <span><b>Section Three</b>
      Subtitle2</span>
    </li>
    ...
  </ul>
</div>

2. Create content sections with corresponding IDs.

<div class="main">
  <section id="one" data-anchor="one" class="page-block">
    <div class="content">
      <h1>Section One</h1>
      <h3>Title One</h3>
      <p>Content One</p>
    </div>
  </section>
  <section id="two" data-anchor="two" class="page-block">
    <div class="content">
      <h1>Section Two</h1>
      <h3>Subtitle Two</h3>
      <p>Content Two</p>
    </div>
  </section>
  <section id="three" data-anchor="three" class="page-block">
    <div class="content">
      <h1>Section Three</h1>
      <h3>Subtitle Three</h3>
      <p>Content Three</p>
    </div>
  </section>
  ...
</div>

3. The CSS for the dots navigation.

@media (min-width: 800px) {

.nav {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  list-style: none;
  z-index: 997;
}

@media (min-width: 500px) and (min-height: 375px) {
  .nav {
    display: block;
  }
}

.nav:before {
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  left: 49px;
}

.dot-nav {
  list-style: none;
  position: relative;
  z-index: 5;
}

.dot-nav a {
  display: inline-block;
  background: #ddd;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  vertical-align: middle;
}

.dot-nav a:hover {
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  background-color: #e53333;
  -webkit-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
}

.dot-nav a.active {
  background-color: #e53333;
  -webkit-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
}

.dot-nav li {
  margin: 25px 0;
}

.dot-nav li span {
  opacity: 0;
  position: fixed;
  vertical-align: middle;
  color: #fff;
  background: #000;
  padding: 2px 7px;
  margin-top: -4px;
  margin-left: 25px;
  border-radius: 4px;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  font-size: 14px;
}

.dot-nav li span b {
  display: block;
  font-size: 18px;
  line-height: 1;
  margin-bottom: 5px;
}

.dot-nav li a:hover + span {
  opacity: 1;
}

4. The CSS styles for the main content.

.main {
  height: 100%;
  position: relative;
}

.page-block {
  background-size: cover;
}

.content {
  width: 70%;
  margin: 0 auto;
  padding: 3em 0;
  color: #fff;
}

5. Add background images into the content sections.

#one {
  background: url(1.jpg) no-repeat center center fixed;
}

#two {
  background: url(2.jpg) no-repeat center center fixed;
}

#three {
  background: url(3.jpg) no-repeat center center fixed;
}

6. The jQuery script to enable the dots navigation & parallax scrolling effect.

$('.dot-nav a').on('click', function() {

  var scrollAnchor = $(this).attr('data-scroll'),
      scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 28;

  $('.main').animate({
    scrollTop: scrollPoint
  }, 500);

  return false;

})


$(window).scroll(function() {
  var windscroll = $(window).scrollTop();
  if (windscroll >= 100) {
      $('.dot-nav').addClass('fixed');
      $('.main section').each(function(i) {
        if ($(this).position().top <= windscroll) {
          $('.dot-nav a.active').removeClass('active');
          $('.dot-nav a').eq(i).addClass('active');
        }
      });

  } else {

    $('dot-nav').removeClass('fixed');
    $('dot-nav a.active').removeClass('active');
    $('dot-nav a:first').addClass('active');
  }

}).scroll();

---

This awesome jQuery plugin is developed by verdana. For more Advanced Usages, please check the demo page or visit the official website.