🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Parallax Image

Figure element with images floating in a 3D space.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

How To

The Parallax Image plugin is used to combine multiple images in perspective and create a 3D effect when mouse position changes.

To create the perspective effect, each <img> element has a different translateZ value. Modify these values if you want to change the perspective (make sure to leave translateZ(0) for the first image).

<div class="parallax-img js-parallax-img">
  <figure class="parallax-img__assets js-parallax-img__assets">
    <img src="image-1.jpg" alt="Image Description">
    <img src="image-2.png" style="transform: translateZ(150px);" aria-hidden="true">
    <img src="image-3.png" style="transform: translateZ(300px);" aria-hidden="true">
  </figure>
</div>

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

<div class="parallax-img js-parallax-img" data-perspective="3">
  <figure class="parallax-img__assets js-parallax-img__assets">
    <img src="image-1.jpg" alt="Image Description">
    <img src="image-2.png" style="transform: translateZ(150px);" aria-hidden="true">
    <img src="image-3.png" style="transform: translateZ(300px);" aria-hidden="true">
  </figure>
</div>

🌅 Demo images:

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us