Parallax
Animate CSS properties depending on the scroll position of the document.
Usage
To apply this component, add the data-uk-parallax
attribute to a container element. Add an option with the desired animation target value for each CSS property you want to animate.
Heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Markup
<div data-uk-parallax="{bg: '-200'}">...</div>
Options
UIkit provides a number of options that you can add to the data-uk-parallax
attribute:
Option | Description |
---|---|
x |
Animate translateX in pixels. |
xp |
Animate translateX in percent. |
y |
Animate translateY in pixels. |
yp |
Animate translateY in percent. |
bg |
Animate a background image. |
bgp |
Animate a background image in percent. |
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. |
NOTE You can basically animate any CSS property that has a single value, like width and height, by adding it to the attribute.
Markup
<div data-uk-parallax="{y: '-200', opacity: '0'}">...</div>
Start and stop values
Properties are always animated from the current value to the target value which you set in the option. However, you can also define a start value yourself. This is done by passing a string to the option which contains two values separated by comma.
NOTE Some properties, like colors, require a start and a stop value!
Markup
<div data-uk-parallax="{x: '-100,100', 'background-color': '#EBF7FD,#FFF1F0'}">...</div>
Nested animation
Using different animations for nested elements is a simple task. Just create another container within the first parallax container and add your options to a new data-uk-parallax
attribute.
Example
Heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Markup
<div data-uk-parallax="{bg: -200}">
<div data-uk-parallax="{opacity: '0,1', scale: '0,1'}">...</div>
</div>
Target Option
Usually, the animation lasts as long as the element itself is 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.
Example
Heading
This text is animated as long as the headline “Target Option” is in the viewport.
Markup
<div id="target-id">...</div>
<div data-uk-parallax="{target: '#target-id'}">...</div>
Velocity
To adjust the easing of the animation, add the velocity
option.
Example
Markup
<div data-uk-parallax="{velocity: '0.5'}">
...
</div>
Viewport
Using the viewport
option, the animation duration can be adjusted. With the value 1
or false
the animation lasts as long as the element is in the viewport. Setting it to 0.5
, for example, animates the property only in the first half of the viewport.
Example
Heading
This text is animated until it reaches the middle of the viewport.
Markup
<div data-uk-parallax="{viewport: '0.5'}">...</div>
JavaScript options
Option | Possible value | Default | Description |
---|---|---|---|
velocity |
float | 0.5 | Animation velocity during scrolling |
target |
mixed | false | Element dimension reference for animation duration. |
viewport |
float (0 to 1) | false | Animation range depending on the viewport. |
media |
integer / string | false | Condition for the active status with a width as integer (e.g. 640) or a cs_s media query |
Init element manually
var parallax = UIkit.parallax(element, { /* options */ });