Elements

If you can dream it, you can do it

Parallax

To create a parallax effect on an image, use the data-uk-parallax data attribute.


markup
<div style="height: 350px; background-image: url(images/background/bg-image-3.jpg);" data-uk-parallax="{bg: '-200'}">
</div>

The data-uk-parallax attribute can also be used to add parallax to html elements. To learn more about all the options attribute, see this table

markup
<div data-uk-parallax="{opacity: '0,1', scale: '0.75,1', viewport: '0.5'}">
  <h1 class="uk-module-title-alt uk-margin-top">Our Menu</h1>
  <h3 class="uk-sub-title">The true taste of good design</h3>
</div>

Our Menu

The true taste of good design


markup
<div class="uk-text-center uk-contrast uk-flex uk-flex-middle uk-flex-center" style="height: 350px; background-image: url(images/background/bg-image-3.jpg);" data-uk-parallax="{bg: '-200'}">
  <div data-uk-parallax="{opacity: '0,1', scale: '0.75,1', viewport: '0.5'}">
    <h1 class="uk-module-title-alt uk-margin-top">Our Menu</h1>
    <h3 class="uk-sub-title">The true taste of good design</h3> </div>
</div>

demo