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.

For backgrounds you need to put <div class=”art-parallax__bg lazy-bg” data-src=”path/to/your/background/”></div> inside. Don’t forget that the parent container should have a height set somehow. Otherwise you won’t see anything because of 0px height.

<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>

And here is an example for images embedded using <img> tag.

<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>