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] attribute whenever you want to create a parallax scrolling on an element, image or background.


<div class="figure-portfolio-big__letter" data-art-parallax="element" data-art-parallax-y="-75%">L</div>

You can specify target of parallax effect for X and Y values in the attribute. So it can run faster or slower in the direction you need.


<div data-art-parallax="image" data-art-parallax-factor="0.1">
  <div class="lazy">
    <img data-src="img/assets/sectionAbout/bg-3.jpg" src="#" alt="" width="1280" height="1580"/>

Parallax on images is compatible with Lazy loading plugin. For best results, make sure you have with and height set on your <img> tag.


<section class="section section-image section_h-800">
  <div class="section-image__wrapper" data-art-parallax="background" data-art-parallax-factor="0.09">
    <div class="art-parallax__bg lazy-bg" data-src="img/assets/project6/img-6-5.jpg"></div>

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