# Parallax Effects

The template has parallax plugin built-in. You can use it to create fancy motion effects for your images and backgrounds.

Use data-art-parallax="true" attribute whenever you want to create a parallax scrolling on an element. You can also adjust direction and/or speed – use data-art-parallax-factor="0.3" Negative values are also fine.

# Markup: Images

<div class="section-figures__item col-lg-6 section section-figures__item_no-paddings" data-art-parallax="data-art-parallax" data-art-parallax-factor="0.15">
  <div class="lazy">
    <img data-src="img/assets/project5/img-5-2.jpg" width="960" height="960" src="#" alt=""/>
  </div>
</div>

# Markup: Backgrounds

<div class="section section_h-800 section-masthead__background section-masthead__background_bottom section_h-900" data-art-parallax="data-art-parallax" data-art-parallax-factor="-0.09">
  <div class="art-parallax__bg lazy-bg" data-src="img/assets/projects/bg-1.jpg"></div>
</div>

Don’t forget that the parent background container should have a height set somehow. Otherwise you won’t see anything because of 0px height.