Kinsey

# Parallax

The template has a parallax plugin built-in. You can use it to create fancy motion effects for the page elements.

  • Use .js-arts-parallax class whenever you want to create a parallax scrolling on an element, an image or a background.
  • Use .js-arts-parallax__scrub class as a wrapper for the element that will be parallaxed.
  • You can specify the targets of parallax effect for X and Y values in the attribute. So it can run faster or slower in the direction you need.
  • Parallax effect applied on the images is compatible with Lazy Loading plugin. For the best results, make sure you have explicitly set width and height set on your image <img>.
  • The parent background container should have a height set somehow. Otherwise you won’t see anything due to 0px height.

# Simple Parallax Background

# Scale by 1.15 and translate down inner background by 15% of 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 down inner background by 10% of height, translate right inner background by 5% of 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 self 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 self 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 self element up by 25% of wrapper height. Scale by 1.15 and translate down inner image by 15% of 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 self element up by 15% of wrapper height. Scale by 1.2 and translate down inner image by 20% of 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 →