FullScreen/One Page Scrolling Plugin – pagePiling.js

Layout
File Size: 51.88 KB
Views Total: 2983 views
Last Update:November 27, 2022
Publish Date: September 24, 2014
Official Website: Go to website
License: MIT
Plugin Author:
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.

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

Thanks for make jQuery plugin is developed by 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.

Related jQuery Plugins

You Might Also Like