What is this

xPanel is waypoint shortcut used to create paralax effect while scrolling panels which you can see on this page.
Just keep scrolling to see.

How to use it

First include the CSS stylesheet at the end of HEAD element:

                <link rel="stylesheet" href="/path/to/xpanel.css" />

Then include the shortcut script at the end of BODY element:

                <script src="/path/to/waypoints-xpanel.min.js"></script>

The most basic usage looks like this:

                $('.container-of-panels').waypoint('xpanel');

It means that xPanel schortcut will be applied to all instances of .container-of-panels class.
Element with this class is trated as container for panels so it must contain some child elements to notice any effect.

How it works

It adds additional class 'xpanel' to the container and 'scroll-down' & 'scroll-down' depending on scroll directin at the time. Additionaly depending on your shortcut settings adds classes like 'shadow', 'dim' and 'reverse' too.
While scrolling child pannels gets class 'in' when panel is incoming into viewport and 'out' when it's outcoming.
Thats all what JS do. Rest of fun is made by CSS.

What you can do

After applying the schortcut you can:

Destroy it:

                    $('.container-of-panels').waypoint('xpanel', 'destroy');

Manually refresh it:

                 
                    $('.container-of-panels').waypoint('xpanel', 'refresh');

Change options of it:

           
                    $('.container-of-panels').waypoint('xpanel', {
    minHeightScale: 1.05,
    fixJumpyScrolling: true,
    reverse: false,
    shadow: true,
    dim: false,
    whenScrollDown: true,
    whenScrollUp: true,
});

Options

minHeightScale

Minimum height of panel in relation to viewport. 1 means 100% of viewport, 1.5 means 150% of viewport and so on.
fixJumpyScrolling

Scrolling using mousewheel is not smooth in all browsers thus if you want avoid situation when incoming panels jumps into view leave this this option set to true.
reverse

By default incoming panels appears in viewport below the outcvoming ones. If you want to apear them above, set it to true.
shadow

Adds shadow to the panels.
dim

Makes outoming panels darker.
whenScrollDown

Enables plugin when scrolling down.
whenScrollUp

Enables plugin when scrolling up.

If you to temporary disable shortcut set both opctions whenScrollDown & whenScrollUp to false.

Hope you like it.

Check out waypoints plugin.

Scroll Top & change plugin options.

xPanel - parallax panels

Coding Preferences

HTML

CSS

Javascript

More

Your Default Settings - Preferences

Validations

xPanel - parallax panels