Parallax

Animate CSS properties depending on the scroll position of the document.

Table of contents

• Usage
• Start stop
• Multiple stops
• Stop positions
• Nesting
• Target
• Start and end
• Easing
• Colors
• Filters
• SVG Strokes
• SVG Images
• Responsive
• Component options
• JavaScript
  • Initialization

Usage

To apply this component, add the data-uk-parallax attribute to any element. Use one of the following options to animate the corresponding CSS property.

Option	Description	Values	Start Value
x	Animate translateX.	Length	0
y	Animate translateY.	Length	0
bgy	Animate background Y position.	Length	Initial
bgx	Animate background X position.	Length	Initial
rotate	Animate rotation clockwise.	deg	0
scale	Animate scaling.	Number, Length	1
color	Animate color	Color	Initial
background-color	Animate background-color	Color	Initial
border-color	Animate border color	Color	Initial
opacity	Animate the opacity.	Number	Initial
blur	Animate the blur filter.	px	0
hue	Animate the hue rotation filter.	deg	0
grayscale	Animate the grayscale filter.	%	0
invert	Animate the invert filter.	%	0
saturate	Animate the saturated filter.	%	0
sepia	Animate the sepia filter.	%	0
stroke	Animate strokes within SVG images.		0

You can use px, %, vw and vh units for the length values. The pixel unit can be left out. For example, x: 200 is the same as x: 200px. Basic mathematics operands + and - are also supported.

Set one of the options to create an animation stop. The property is animated from its start value to the defined stop value.

Start stop

To set a custom start value, create another animation stop by using two values separated by a comma.

Multiple stops

To better control the property animation, you can set intermediate stops along the animation sequence. Just use a comma-separated list of values. The animation will be equally distributed between the stops.

Stop positions

Set an optional stop position to specify the percentage along the animation sequence when the stop occurs.

Nesting

Different parallax animations can easily be nested.

Target

The animation starts and stops depending on the element position in the viewport. To start and stop the animation based on the viewport visibility of another element, use the target option. This can be helpful when using nested animations.

Start and end

To adjust the animation duration, set the start and end options. The start option defines when the animation starts. The default value of 0 means that the target’s top border and viewport’s bottom border intersect. The end option defines when the animation ends. The default value of 0 means that the target’s bottom border and the viewport’s top border intersect. Values can be set in any dimension unit, namely vh, % and px. The % unit relates to the target’s height. Both options allow basic mathematics operands, + and -.

Easing

To adjust the easing of the animation, add the easing option. 0 transitions at an even speed. A negative value starts off quickly slowing down until complete while a positive value starts off slowly increasing the speed until complete.

Colors

The transition from one color to another, for example for borders, backgrounds or text colors. Define colors using rgb() definitions, color keywords or hex values.

Filters

CSS filters are an easy way to add graphical effects to any element on your page. While they are still an experimental feature for some browsers, you can safely use them as long as your usability does not suffer. Using the Parallax component, you can dynamically change the amount of a filter on your element.

SVG Strokes

The Parallax component can be used to animate SVG strokes. The effect looks like the SVG strokes are drawn before your eyes. The SVG image has to be injected into the markup as an inline SVG. This can be done manually or by using the SVG component. Since the SVG component injects the SVG after the image element, the data-uk-parallax attribute has to be added to a parent element.

Note It’s recommended to use percent unit %, so you don’t have to know the exact length of the strokes.

SVG Images

The Parallax component can be applied to the elements of inline SVG images, like rect, circle and path.

Responsive

It’s recommended to use vw or vh as length units instead of pixels. The parallax will adapt depending on the viewport.

The parallax can also be applied to certain viewports only. Add the media option with one of the possible values. For example, add a number in pixel, e.g. 640, or a breakpoint, e.g. @s, @m, @l or @xl. The parallax will be shown for the specified viewport width and larger.

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

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	Boolean, Number, String	false	Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).

JavaScript

Learn more about JavaScript components.

Initialization