Touch-friendly 3D Tilt & Parallax Effects In JavaScript – Tiltify.js

Preview:

Description:

Tiltify.js is a JavaScript library that adds interactive 3D tilt & parallax effects to elements using modern JS events and CSS3 transforms.

By incorporating responsive mouse and touch input detection, Tiltify ensures smooth and fluid interactions to create an immersive 3D depth experience for your visitors.

How to use it:

1. Include the Tiltify.js script in your project.

<script src="Tiltify.js"></script>

2. Create a new instance with the selector for the element you want to tilt.

let tiltify = new Tiltify(
    $$( ".myElements" ),
    max: 75,
    perspective: 1000,
    speed: 300
)}

3. To create a 3d parallax effect on an element, just add the transform-style:preserve-3d; & translateZ(25px) to the tilting element.

.tiltingParent {
  transform-style: preserve-3d;
  transform: perspective(1000px);
}
.tiltingChildrens {
  transform: translateZ(25px);
}