Cursor parallax effect

Create cursor parallax effect on any block with background image and manage how it should be shown, its speed and direction.

Parallax speed

You can specify at which speed parallax will move for both X and Y axis.

Fixed speed, single axis
Speed can be set as number and parallax will always move at that speed.
For example, Y axis cursor speed = 0.15
Fixed speed, X and Y axis
Speed can be set as number and parallax will always move at that speed.
For example, cursor speed for X = 0.3 and Y axis = 0.15
Speed range, single axis
Speed can be set as range, that will make speed to be calculated to show most of image with parallax.
For example, Y axis cursor speed = [0.1,2]
Speed range, X and Y axis
Speed can be set as range, that will make speed to be calculated to show most of image with parallax.
For example, cursor speed for X and Y axis = [0.1,2]
Auto speed
When speed is set to 'auto', speed will fully depend on image and will be calculated to show most of image maintaining its ratio. For best performace should be applied to both X and Y axis, so parallax axis will be automaticaly changed to view whole image on different sizes.

Parallax animation

Manage how smooth parallax will move.

Animation speed
You can set parallax animation speed to slower parallax movement.
Axis synchronize
You can disable X and Y axis synchronization so it will move freely.

Reverse parallax

You can set reverse cursor parallax effect, so it will go to oposite direction.

Reverse X axis
Go to oposite direction for X axis.
Reverse Y axis
Go to oposite direction for Y axis.
Reverse X and Y axis
Go to oposite direction for both X and Y axis.

Cursor area

Cursor movement area, i.e. will move parallax while moving cursor in it and scales parallax image accordingly.

Window
By default, cursor area is set to window.
Self
Cursor area can be set to the parallax block itself.
Document
Cursor area can be set to all browser space where parallax is visible.
Selector
Set cursor area element by provided selector.

Prallax start position

Start position is the cursor position before parallax starts any movement and it will set parallax position as if cursor were there.

Default
By default, start position is set to focus on provided center coordinate.
Parallax center
It can be set to parallax center, as if cursor were at the center of the cursor area.
Disabled
It can be set to false, so it won't set starting cursor position.

Prallax position on cursor area leave

After cursor leaves cursor area, moves parallax to provided position as if cursor were there.

Default
By default, on leave position is the same as start position.
Parallax center
It can be set to parallax center, as if cursor were at the center of the cursor area.
Disabled
It can be set to false, so it won't move after leaving cursor area.

Center/focus area

Manage how parallax is centered inside the block. By default, parallax will be centered at top left corner.

Parallax center position
It's possible to specify center position by setting top, bottom, left or right offset in pixels (px) or in percents (%).
For example, by setting left and top to 50%, it will make parallax image centered at its center.
Parallax center rectangle
Parallax center rectangle can be specifiend by setting all coordinates (top, bottom, left and right). When center rectangle is specified, the plugin will try to position parallax so this rectangle is in viewport, and centering in the center of the rectangle.
For example, lets put center rectangle on the powerboat.

Parallax overflow area

Everything outside of it is tolerated as secondary content, and inside - primary content. Plugin will try to make primary content visible to the user and will neglect the secondary content. By default, overflow area is the whole parallax, so all its content is primary

Single side overflow
When single side offset is set, without setting oposite side offset, the overflow area will take all space from it and up to oposite side.
For example, when overflow top offset is set to 300px, overflow area will start at 300px and up to the bottom.
Both sides overflow
When both sides offsets is set, the overflow area will take all space between it.
In example, overflow top offset is set to 300px and bottom to 200px.
Overflow rectangle
When all sides offsets is set, the overflow rectangle will take all space between it.
In example, overflow left offset is set to 600px, right to 80px, top to 300px and bottom to 200px.
Overflow + center rectangle
When overflow rectangle is set together with center rectangle, it will show it's most potential. It's best when center rectangle is within overflow rectangle.
For example, lets take same overflow rectangle and centering rectangle same as on Center/focus area section, i.e. make it center on powerboat.