Kinsey

# Parallax

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

  • Use the .js-arts-parallax class to create a parallax scrolling effect on an element, image, or background.
  • Use the .js-arts-parallax__scrub class as a wrapper for the element that will be parallaxed.
  • Specify the targets of the parallax effect for X and Y values in the attribute to control the speed and direction.
  • The parallax effect applied to images is compatible with the Lazy Loading plugin. For best results, ensure you have explicitly set the width and height on your <img> element.
  • The parent background container should have a defined height. Otherwise, you won’t see anything due to a 0px height.

# Simple Parallax Background

# Scale by 1.15 and translate the inner background down by 15% of its height.
<div
  class="js-arts-parallax overflow"
  data-arts-parallax-factor-y="0.15"
>
  <!-- transformed element - put background image here -->
  <div class="js-arts-parallax__scrub"></div>
</div>

# Horizontal + Vertical Parallax

# Scale by 1.15, translate the inner background down by 10% of its height, and translate the inner background right by 5% of its width.
<div 
  class="js-arts-parallax overflow" 
  data-arts-parallax-factor-x="0.05" 
  data-arts-parallax-factor-y="0.1"
>
  <div class="js-arts-parallax__scrub"></div>
</div>

# Self Parallax Image

# Translate the element down by 50px.
<img 
  class="js-arts-parallax" 
  src="#" 
  loading="lazy" 
  alt="" 
  data-arts-parallax-target="self" 
  data-arts-parallax-y-to="50"
>
# Translate the element up by 150px.
<img 
  class="js-arts-parallax" 
  src="#" 
  loading="lazy" 
  alt="" 
  data-arts-parallax-target="self" 
  data-arts-parallax-y-to="-150"
>

# Nested Parallax Elements

# Translate the element up by 25% of the wrapper height. Scale by 1.15 and translate the inner image down by 15% of its height.
<div
  class="js-arts-parallax overflow"
  data-arts-parallax-target="self"
  data-arts-parallax-y-to="-25%"
>
  <div class="js-arts-parallax" data-arts-parallax-factor-y="0.15">
    <img class="js-arts-parallax__scrub" src="#" loading="lazy" alt="">
  </div>
</div>
# Translate the element up by 15% of the wrapper height. Scale by 1.2 and translate the inner image down by 20% of its height.
<div
  class="js-arts-parallax overflow"
  data-arts-parallax-target="self"
  data-arts-parallax-y-to="15%"
>
  <div class="js-arts-parallax" data-arts-parallax-factor-y="0.2">
    <img class="js-arts-parallax__scrub" src="#" loading="lazy" alt="">
  </div>
</div>

# Showcase

  • 📄 All template pages excluding fullscreen sliders and special pages.

← Horizontal Scrolling →