# Parallax Effects

The template includes a built-in parallax plugin that allows you to create dynamic motion effects for page elements.

Use the [data-arts-parallax] attribute to apply a parallax scrolling effect to an element, image, or background.

# Markup: Elements

Specify the parallax effect targets for X and Y values in the attribute to control the speed and direction of the effect.

# Example 1.1: Vertical Parallax Element

<div 
  class="section-services__letter" 
  data-arts-parallax="element" 
  data-arts-parallax-y="-20%"
>
  ...
</div>

# Example 1.2: Horizontal Parallax Element

<div 
  class="section-demo__stacked-image" 
  data-arts-parallax="element" 
  data-arts-parallax-x="10%"
>
  ...
</div>

# Markup: Images

The parallax effect applied to images is compatible with the Lazy Loading plugin. For optimal results, ensure that you explicitly set the width and height attributes on your <img> element.

# Example 2: Parallax Image

<div
  class="figure-image__wrapper-img"
  data-arts-parallax="true" 
  data-arts-parallax-factor="0.15"
>
  <div class="lazy">
    <img 
      data-src="img/assets/project1/img-1-2_thumb.jpg" 
      src="#" 
      width="450" 
      height="675"
      alt=""
    />
  </div>
</div>

# Markup: Backgrounds

Ensure the parent background container has a defined height; otherwise, it will have a 0px height and be invisible.

# Example 3: Parallax Background

<div class="section section-image section_h-800">
  <div 
    class="section-image__wrapper"
    data-arts-parallax="true" 
    data-arts-parallax-factor="0.15"
  >
    <div class="w-100 h-100">
      <div
        class="lazy-bg" 
        data-src="img/assets/sectionAbout/about-1.jpg"
      >
      </div>
    </div>
  </div>
</div>

← Lazy Loading Mouse Cursor Follower →