Parallax

Target

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Start + End (Reverse)

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Easing

0
0.2
0.4
0.6
0.8
1
2
3
4
5

Color and Viewport

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Filter

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Multiple Steps

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Javascript Options

Option Value Default Description
easing Number 1 Animation easing during scrolling.
target String false Element dimension reference for animation duration.
viewport Number 1 Animation range depending on the viewport.
media Integer|String false Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl).

Animated properties

You can define multiple steps by using a comma separated list of values. (e.g. x: 0,50,150)

Option Description
x Animate translateX in pixels or percent.
y Animate translateY in pixels or percent.
bgy Animate a background image (y-axis).
bgx Animate a background image (x-axis).
rotate Animate rotation clockwise in degree.
scale Animate scaling.
color Animate color (needs start and stop value).
background-color Animate background-color (needs start and stop value).
border-color Animate border color (needs start and stop value).
opacity Animate the opacity.
blur Animate the blur filter.
hue Animate the hue rotation filter.
grayscale Animate the grayscale filter.
invert Animate the invert filter.
saturate Animate the saturate filter.
sepia Animate the sepia filter.