# Parallax Effects

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

Use the [data-art-parallax] attribute whenever you want to create a parallax scrolling effect on an element, image, or background.

# Elements

You can specify the targets of the parallax effect for X and Y values in the attribute. This allows it to run faster or slower in the direction you need.

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

# Images

The parallax effect applied to images is compatible with the Lazy Loading plugin. For best results, make sure you have width and height set on your <img> tag.

<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"/>
  </div>
</div>

# Backgrounds

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

<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>
  </div>
</section>

← Images Lazy Loading Fluid Typography & Spacing →