xPanel.js

xPanel is waypoint shortcut used to create paralax effect while scrolling panels.

Examples

Here are a few examples:

Installation

Include the waypoints plugin.

Include the CSS stylesheet at the end of <head> element:

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

Include the shortcut script at the end of <body> element:

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

Usage

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.