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.

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:

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

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

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

Markup

<div data-uk-parallax="{viewport: '0.5'}">...</div>

---

JavaScript options

Init element manually

var parallax = UIkit.parallax(element, { /* options */ });