Animated One Page Scrolling With jQuery - partialScroll.js

Animated One Page Scrolling With jQuery - partialScroll.js

partialScroll.js is a jQuery one page scroll plugin for modern web app that enables the user to scroll through fullscreen pages using navigation buttons and/or mousewheel.

1. Create the fullscreen pages you want to scroll through.

<div class="container">
    <div class="section">1</div>
    <div class="section">2</div>
    <div class="section">3</div>
    <div class="section">4</div>
    <div class="section footer"></div>
</div>

2. The required CSS styles to make the sections fullscreen.

.container {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.section {
  width: 100vw;
  height: 100vh;
}

3. Include both jQuery library and the jquery.partialScroll.js script at the end of the html document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/jquery.partialScroll.js"></script>

4. Possible plugin options and callback functions.

var myScroll = $('.container').partialScroll({
    // width of section
    secWidth: 0, 
    // height of section
    secHeight: 0,
    // length of section
    secLength: 0, 
    // animation speed
    scrollingSpeed: 900, 
    // used to prevent performance issues
    throttleScrolling: 100, 
    // shows footer as you scroll to the last section
    footer: false,
    // enable mouse wheel
    globalWheel: true,  
    // selector of top container
    globalSelector: 'html',
    // callbacks
    sliderBefore: function () { return true; },
    sliderAfter: function () { return true; }
    
});

5. API methods.

// create a new instance
var myScroll = $('.container').partialScroll();
// scroll to a specific section
// 3 = section two
myScroll.moveTo(3);
// jump to a specific section
// 2 = section one
myScroll.silentMoveTo(2);
// scroll back to the previous section
myScroll.moveToUp();
// scroll to the next section
myScroll.moveToDown();
// disable mouse wheel
myScroll.stopWheel();
// enable mouse wheel
myScroll.startWheel();
// disable page scroll
myScroll.stopScroll();
// enable page scroll
myScroll.startScroll();

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

  • Publication date: 24.11.2017
  • Source