Parallax Image

Overlapping images floating in a 3D space.

How to

The Parallax Image plugin creates a 3D effect by moving images distributed along the z-axis. As the mouse position changes, the images move in parallax, creating an illusion of depth.

For best results, all images should have the same ratio (width/height).

To create the perspective effect, each .js-parallax__item element has a different translateZ value. The translate value is set using the data-parallax-distance attribute. E.g., a data-parallax-distance="150" sets a translateZ(150px).

<div class="parallax js-parallax">
  <figure class="parallax__wrapper js-parallax__wrapper">
    <img class="parallax__item js-parallax__item" alt="Image description">
    <img class="parallax__item js-parallax__item" data-parallax-distance="150" aria-hidden="true">
    <img class="parallax__item js-parallax__item" data-parallax-distance="300" aria-hidden="true">
  </figure>
</div>

Modify these values if you want to change the perspective (make sure you do not add a data-parallax-distance to the first image).

To modify the 3D effect (visible when moving the mouse over the image), add a data-perspective attribute to the .js-parallax element (deafult is 2, maximum value is 5):

<div class="parallax js-parallax" data-perspective="3">
  <figure class="parallax__wrapper js-parallax__wrapper">
    <img class="parallax__item js-parallax__item" alt="Image description">
    <img class="parallax__item js-parallax__item" data-parallax-distance="150" aria-hidden="true">
    <img class="parallax__item js-parallax__item" data-parallax-distance="300" aria-hidden="true">
  </figure>
</div>

Categories

• Content and Layout > Hero
• Plugins > Misc

Bug report & feedback

Component Github page ↗