
Yet another jQuery one page scrolling plugin which allows your to vertically and smoothly slide the web page to 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="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/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);
Change log:
2018-03-08
- v1.5.5
This awesome jQuery plugin is developed by alvarotrigo. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 08.03.2018
- Source