Touch-friendly Fullscreen Scrolling With jQuery - fullPage.js

fullPage.js is a dead simple jQuery plugin for creating smooth mobile-friendly fullscreen scrolling effect for one page scrolling website.

The plugin lets your user smoothly scroll through fullscreen page sections with mousewheel or touch swipe events. Smooth scrolling effect depending on CSS3 transitions.

How to use it:

1. Create the sections on the webpage.

<div id="fullpage">
  <section>
    <h1>Web</h1>
  </section>
  <section>
    <h1>Development</h1>
  </section>
  <section>
    <h1>Coding</h1>
  </section>
  <section>
    <h1>Creating</h1>
  </section>
  <section>
    <h1>Learning</h1>
  </section>
</div>

2. Make the page sections fullscreen.

#fullpage {
  height: 100vh;
  /* ! important here */
  overflow: hidden;
}

#fullpage section {
  height: 100vh;
}

3. Place jQuery library and the JavaScript jquery.fullpage.min.js at the bottom of the webpage.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="jquery.fullpage.min.js"></script>

4. Call the function on the top container. That's it.

$('#fullpage').fullpage();

---

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