Vertical Page Slider Scrolling With Parallax Effect | FullPageScroll

How to make use of it:

1. Add content sections as slides to the web page slider.

<div class="slider">
  <div class="slide active">
    <div class="bg"></div>
  </div>
  <div class="slide queue">
    <div class="bg"></div>
  </div>
  <div class="slide queue">
    <div class="bg"></div>
  </div>
  <div class="slide queue">
    <div class="bg"></div>
  </div>
</div>

2. The principal styles for the web page slider.

/* Make the slider fullscreen */
html,
body,
.slider,
.slide,
.bg {    
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;        
}
/* Main styles */
.slider {
  background: #000;       
}
.slide {
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(0,0,0);
  transition: 800ms;   
}
.bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 800ms;
}
/* Transitions */
.queue {
  transform: translate3d(0, 100%, 0);           
}
.prev {
  transform: translate3d(0,-50%,0); 
}
.prev .bg {
  opacity: 0.5;   
}
.bounce {
  transition: 300ms; 
}
.slide:first-child.bounce {
  transform: translate3d(0,10%,0);          
} 
.slide:last-child.bounce {
  transform: translate3d(0,-10%,0);          
}

3. Add background photographs to your content.

.slide:nth-child(1) .bg {
  background-image: url(1.jpg);  
}
.slide:nth-child(2) .bg {
  background-image: url(2.jpg);  
}
.slide:nth-child(3) .bg {
  background-image: url(3.jpg);  
}
.slide:nth-child(4) .bg {
  background-image: url(4.jpg); 
}

4. The principal JavaScript to allow the web page slider. Copy and paste the next JS snippets after the jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>

$(document).ready(function () {
  var timeStart = 0;
  function wheely(e) {
    var y = e.originalEvent.deltaY;
    var timeStop = new Date().getTime();
    var timeDiff = timeStop - timeStart;
    if (timeDiff > 200) {
      if (y > 0) {
        nextSlide();
      }
      if (y < 0) {
        prevSlide();
      }
    }
    timeStart = timeStop;
  }
  function prevSlide() {
    if ($(".active").is(":first-child")) {
      if (!$(".slider").hasClass("dragging")) {
        $(".slide:first-child").addClass("bounce");
        setTimeout(function () {
          $(".slide:first-child").removeClass("bounce");
        }, 300);
      }
    } else {
      $(".active")
        .removeClass("active")
        .addClass("queue")
        .prev()
        .removeClass("prev")
        .addClass("active");
    }
  }
  function nextSlide() {
    if ($(".active").is(":last-child")) {
      if (!$(".slider").hasClass("dragging")) {
        $(".slide:last-child").addClass("bounce");
        setTimeout(function () {
          $(".slide:last-child").removeClass("bounce");
        }, 300);
      }
    } else {
      $(".active")
        .removeClass("active")
        .addClass("prev")
        .next()
        .removeClass("queue")
        .addClass("active");
    }
  }
  function hotkeys(e) {
    if (e.keyCode == 38) {
      prevSlide();
    }
    if (e.keyCode == 40) {
      e.preventDefault();
      nextSlide();
    }
  }
  function dragStart(e) {
    e.preventDefault();
    if (e.type == "touchstart") {
      $(document).off("mousedown", dragStart);
      startPoint = e.originalEvent.touches[0].pageY;
    } else {
      startPoint = e.pageY;
    }
    dragDist = 0;
    $(document).on("touchmove mousemove", dragMove);
  }
  function dragMove(e) {
    if (e.type == "touchmove") {
      var movePoint = e.originalEvent.touches[0].pageY;
    } else {
      var movePoint = e.pageY;
    }
    dragDist = ((movePoint - startPoint) / $(".slider").height()) * 100;
    $(".slider").addClass("dragging");
    $(".slide, .bg").css({
      transition: "0ms",
    });
    if (dragDist < 0) {
      $(".active .bg").css({
        opacity: 1 + dragDist / 200,
      });
      $(".active")
        .css({
          transform: "translate3d(0," + dragDist / 2 + "%,0)",
        })
        .next()
        .css({
          transform: "translate3d(0," + (100 + dragDist) + "%,0)",
        });
    }
    if (dragDist > 0) {
      $(".active")
        .css({
          transform: "translate3d(0," + dragDist + "%,0)",
        })
        .prev()
        .css({
          animation: "none",
          transform: "translate3d(0," + (-50 + dragDist / 2) + "%,0)",
        })
        .find(".bg")
        .css({
          opacity: 0.5 + dragDist / 200,
        });
    }
  }
  function dragEnd() {
    $(document).off("touchmove mousemove", dragMove);
    $(".slide, .bg").removeAttr("style");
    if (dragDist > 20) {
      prevSlide();
    }
    if (dragDist < -20) {
      nextSlide();
    }
    setTimeout(function () {
      $(".slider").removeClass("dragging");
    }, 800);
  }
  $(document).on("wheel", wheely);
  $(document).on("keydown", hotkeys);
  $(document).on("touchstart mousedown", dragStart);
  $(document).on("touchend mouseup", dragEnd);
});

One Page Scroll With Parallax Effect, JQuery FullPage Scroll Plugin/Github, one page scroll example, full page scroll, one page scroll css, full page parallax scroll effect, jquery one page scroll animation, fullpage js free, fullpage js parallax, full page vertical slider

See Demo And Download