FullScreen/One Page Scrolling Plugin – pagePiling.js

Layout
Demo    Download
jQuery Plugin For Beautiful Full Window Scrolling Website - pagePiling.js
File Size: 51.88 KB
Views Total: 773 views
Last Update:November 22, 2020
Publish Date: August 23, 2020
Official Website: Go to website
License: MIT

The full-screen one-page scroll plug-in has introduced many models, such as the powerful pagepiling.js, fullPage that defines animations at will. Which, compared to other full-screen scrolling plug-ins, features scrolling, which folds all the “pages” together and uses translate3d to “pump” the page, creating a “visually poor” effect. A vertically scroll and smoothly slide to move with web page to a desired anchor point.

Table of Contents

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)
How to Use :

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

<link rel="stylesheet" href="css/jquery.pagepiling.css" />
<script src="js/jquery.min.js"></script>
<script src="js/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 <a href="http://www.jquerypost.com/category/animation/">jQuery Animation</a> or jQuery easing plugin
loopBottom: false,
loopTop: false,
css3: true,
navigation: {
  'textColor': '#000',
  'bulletsColor': '#000',
  'position': 'right',
  'tooltips': ['section1', 'section2', 'section3', 'section4']
},
normal<a href="http://www.jquerypost.com/tag/scroll/">Scroll</a>ElementTouchThreshold: 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);

Done


Nola Arney

Nola Arney is a full stack web developer who has Author at jQuerypost. Her ambition for development is only matched by his desire to find the perfect meme for every occasion.