POPS

Basic Usage

Simply include the pops.js and pops.css files in your project.

HTML Setup

The main container should be one level below the body for the plugin to work

<body>
    <div class="main">
        <section></section>
        <section></section>
        <section></section>
    </div>
</body>

JS Setup

For the JS setup just call the function on your main container and add the options that you want.

pops(".main", {
   sectionContainer: "section",
   easing: "ease",
   animationTime: 600,
   pagination: true,
   updateURL: false,
   beforeMove: function(index) {},
   afterMove: function(index) {},
   loop: false,
   keyboard: true,
   responsiveFallback: false
});

Public methods

Triggering page move can be acomplished with these methods.

Scroll one section up

moveUp(".main");

Scroll one section down

moveDown(".main");

Scroll to specified section

moveTo(".main", pageIndex);

Callbacks

Callbacks are used to trigger code before or after page move.

beforeMove

This callback is used to trigger code before the scroll animation

pops(".main", {
    beforeMove: function(index, next_el) {
    /* Your code here */
    }
});

afterMove

This callback is used to trigger code after the scroll animation

pops(".main", {
    afterMove: function(index, next_el) {
    /* Your code here */
    }
});

←