Scroll parallax effect

Create scroll 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.

Default speed
By default, speed will be automaticaly calculated so most image is shown with parallax, but speed is can't be lower than 0.2 and greather than 1, and is equal to setting speed to '[0.2, 1]'.
Fixed speed
Speed can be set as number and parallax will always move at that speed. Setting speed to 0 will make image static, setting it to 1 will make it move with the same speed as window.
For example, speed = 0.15
Speed range
Speed can be set as range, that will make speed to be calculated to show most of image with parallax.
For example, speed = [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.

Parallax animation

Manage how smooth parallax will move.

Animation speed
You can set parallax animation speed to slower parallax movement.
Empty space
You can allow empty space to be visible when animation is slower than movement.

Reverse parallax

Make parallax go to the oposite direction.

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.