jQuery Plugin For Beautiful Full Window Scrolling Website - pagePiling.js

File Size: 2.58 MB
Views Total: 18466
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Beautiful Full Window Scrolling Website - pagePiling.js

Yet another jQuery one page scrolling plugin that allows you to vertically and smoothly slide the web page to the desired anchor point.

More features:

  • Anchor links & side bullets navigation.
  • Pile your sections one over another and access them scrolling or by URL.
  • Mousewheel, touch swipe and keyboard navigation.
  • Supports background images.
  • Looping top and bottom enabled. (Loop demo)
  • Lots of options and callback events support. (Callbacks demo)

Basic Usage:

1. Include jQuery library and the JQuery pagePiling.js plugin's script and stylesheet in your web page.

<link rel="stylesheet" href="jquery.pagepiling.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="jquery.pagepiling.min.js"></script>

2. Create a set of content sections for your one page website.

<div id="pagepiling">
  <div class="section" id="section1">
    <h1>pagePiling.js jQuery Plugin Demo</h1>
    <p>This is section 1</p>
  </div>
  <div class="section" id="section2">
    <div class="intro">
      <h1>Section 2</h1>
      <p>This is section 2</p>
    </div>
  </div>
  <div class="section" id="section3">
    <div class="intro">
      <h1>Section 3</h1>
      <p>This is section 3</p>
    </div>
  </div>
</div>

3. Create anchor links which allows the visitor to navigate through the sections manually.

<ul id="menu">
  <li data-menuanchor="page1" class="active"><a href="#page1">Page 1</a></li>
  <li data-menuanchor="page2"><a href="#page2">Page 2</a></li>
  <li data-menuanchor="page3"><a href="#page3">Page 3</a></li>
</ul>

4. Initialize the plugin and set the options for the one page scrolling website.

$(document).ready(function() {
  $('#pagepiling').pagepiling({
    menu: '#menu',
    anchors: ['page1', 'page2', 'page3'],
    sectionsColor: ['#bfda00', '#2ebe21', '#2C3E50', '#51bec4'],
    loopTop: true,
    loopBottom: true
  });
});

5. All the default options.

menu: null, // A selector can be used to specify the menu to link with the sections. 
verticalCentered: true,
sectionsColor: [],
anchors: [],
scrollingSpeed: 700,
easing: 'swing', // requires jQuery UI or jQuery easing plugin
loopBottom: false,
loopTop: false,
css3: true,
navigation: {
  'textColor': '#000',
  'bulletsColor': '#000',
  'position': 'right',
  'tooltips': ['section1', 'section2', 'section3', 'section4']
},
normalScrollElementTouchThreshold: 5,
touchSensitivity: 5,
keyboardScrolling: true,
sectionSelector: '.section',
animateAnchor: false,

//events
afterLoad: null,
onLeave: null,
afterRender: null

6. Public methods.

//Scrolls one section up:
$.fn.pagePiling.moveSectionUp();

// Scrolls one section down:
$.fn.pagePiling.moveSectionDown();


//Scrolls the page to the given section.
$.fn.pagePiling.moveTo('firstSection');

//Scrolling to the 3rd section in the site
$.fn.pagePiling.moveTo(3, 0);

//Which is the same as
$.fn.pagePiling.moveTo(3);

//Adds or remove the possiblity of scrolling through sections by using the mouse wheel/trackpad or touch gestures (which is active by default).
$.fn.pagePiling.setAllowScrolling(false);


//Adds or remove the possiblity of scrolling through sections by using the keyboard arrow keys (which is active by default).
$.fn.pagePiling.setKeyboardScrolling(false);

//Defines the scrolling speed in milliseconds.

$.fn.pagePiling.setScrollingSpeed(700);

Changelog:

2021-05-12

  • Check if the element exists first, then attach an event handler

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