PagePiling.js

A single page scrolling app using pagepiling.js

by Programming Llama

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.5/jquery.pagepiling.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.5/jquery.pagepiling.min.js"></script>
<div id="pagepiling">
  <div class="mySection">
      <h1>Nothing Special Here, Just a normal section</h1>
  </div>
  <div class="mySection pp-scrollable">
    <h1>A Scrollable Section</h1>
    <h3>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc nulla, aliquet in mattis ac, commodo ut orci. Pellentesque fermentum sodales lacus. Nulla turpis dui, accumsan sit amet lorem nec, tincidunt convallis justo. Proin felis risus, dictum at
      mollis vel, commodo quis nisl. In nec egestas tortor, vel finibus neque. Nulla nec porttitor nisi. Donec euismod sagittis dui. Nullam augue justo, blandit quis tincidunt vitae, porta quis mi. Phasellus ultrices interdum dolor a dapibus. Nunc quis
      pharetra nunc, in facilisis arcu. Suspendisse scelerisque, enim viverra volutpat ultricies, nulla erat lacinia lacus, eu mollis velit turpis ut nulla. Suspendisse eu urna nec tortor semper euismod. Mauris quis purus in mi semper tincidunt quis ultricies
      orci. Proin aliquet dolor quis eros eleifend laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas et nisl at lectus tempor accumsan non non enim. Sed ultricies at magna at consequat. Aliquam
      varius, nulla non convallis...

CSS

.mySection {
  text-align: center;
}

.no-align {
  text-align: unset !important;
}

JavaScript

$(document).ready(function() {
  $('#pagepiling').pagepiling({
    direction: 'horizontal',
    sectionsColor: ['#C39BD3', '#F7DC6F', '#AED6F1'],
    sectionSelector: '.mySection',
    loopBottom: true,
    loopTop: false,
    scrollingSpeed: 100,
    onLeave: function(index, nextIndex, direction) {
      console.log('leaving section ' + index + ' moving to section ' + nextIndex + ''); 
    },
    afterLoad: function(anchorLink, index) {
      console.log(anchorLink);
      console.log(index);
    },
    afterRender: function() {
      console.log('done rendering');
    }
  });
});