FullScreen/One Page Scrolling Plugin – pagePiling.js

jQuery Plugin For Beautiful Full Window Scrolling Website - pagePiling.js
File Size: 51.88 KB
Views Total: 4703 views
Last Update:April 16, 2024
Publish Date: September 24, 2014
Official Website: Go to website
License: MIT
Plugin Author: alvarotrigo
Demo    Download

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.

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 :

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>

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 class="section" id="section2">
    <div class="intro">
      <h1>Section 2</h1>
      <p>This is section 2</p>
  <div class="section" id="section3">
    <div class="intro">
      <h1>Section 3</h1>
      <p>This is section 3</p>

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>

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

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

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,

afterLoad: null,
onLeave: null,
afterRender: null

Public methods.

//Scrolls one section up:

// Scrolls one section down:

//Scrolls the page to the given section.

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

//Which is the same as

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

//Adds or remove the possiblity of scrolling through sections by using the keyboard arrow keys (which is active by default).

//Defines the scrolling speed in milliseconds.



Thanks for make jQuery plugin is developed by alvarotrigo For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • 1.5.6
  • 1.5.5
  • 1.5.4
  • 1.5.3
  • 1.5.1
  • 1.5
  • 1.4
  • 1.3
  • 1.2
  • 1.0
  • 0.0.9
  • 0.0.8
  • 0.0.7
  • 0.0.6
  • 0.0.5
  • 0.0.4

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.