Parallax

Viewport Units

Headline

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

Start and End Stops

Headline

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

Multiple Stops

Headline

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

Stop Positions

Headline

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

Target

Headline

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

Start and End

0 / 0
100% / 100%
30vh / 30vh
100% + 100 / 100% + 100

Easing

-3
-2
-1
-0.5
0
0.5
1
2
3

Color

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.

SVG Stroke

JavaScript Options

Option Value Default Description
easing Number 1 Animation easing during scrolling.
target CSS Selector false Element dimension reference for animation duration.
start Length 0 Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the target's top border and viewport's bottom border intersect.
end Length 0 End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the target's bottom border and the viewport's top border intersect.
media Number|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 animation stops by using a comma-separated list of values. (e.g. x: 0,50,150). A stop can be defined by a value and a position. If you don't specify the position of a stop, it is placed halfway between the one that precedes it and the one that follows it.

Option Default Unit Description
x px Animate translateX.
y px Animate translateY.
bgy px Animate a background image (y-axis).
bgx px Animate a background image (x-axis).
rotate deg Animate rotation clockwise.
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 px Animate the blur filter.
hue deg 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.
stroke Animate strokes within SVG images.