Responsive One Page Scroll JavaScript Plugin – fullpage-scroll.js

Preview:

Description:

A lightweight and responsive one page scroll plugin that allows users to seamlessly navigate through sections using their mouse wheel or touch swipe gestures.

It also provides functionality to enable or disable the one page scroll behavior based on specific layout conditions by using CSS media queries.

Perfect for SPA, portfolio websites, product landing pages, online magazines, and more.

How to use it:

1. Download and import the fullpage-scroll.js.

<script src="/dist/fullpage-scroll.js"></script>

2. Add the following HTML to the page and customize the content of each section as needed.

<div id="container">
  <section>one</section>
  <section>two</section>
  <section>three</section>
  ...
</div>

3. Make the sections fullscreen.

section {
  box-sizing: border-box;
  position: relative;
  height: 100vh;
  overflow: hidden;
}

4. Create a new instance of the FullPageScroll()

document.addEventListener("DOMContentLoaded", function() {
  var fps = new FullPageScroll('container', { 
      // options here
  });
});

5. Auto disable the plugin on specific devices:

document.addEventListener("DOMContentLoaded", function() {
  var fps = new FullPageScroll('container', { 
      mediaQuery: 'screen and (min-width: 640px)',
  });
});

6. More configuration options.

document.addEventListener("DOMContentLoaded", function() {
  var fps = new FullPageScroll('container', { 
      // animation speed in ms
      transitionTime: 1000,
      // auto goto the first section
      goToTopOnLast: true,
      // selector of slides
      slideSelector: "section",
  });
});

7. API methods.

// goto a specific slide
fps.goToSlide(index)
// goto the first slide
goToFirstSlide()
// goto the next slide
nextSlide()
// goto the prev slide
previousSlide()

8. Events.

fps.onslide = function(e) {
  console.log("Slide "+(e.target.currentSlide+1)+" of "+e.target.slides.length);
}