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

Category: Animation , Javascript , Recommended | April 13, 2023
Author:SATYAPRAKASH-11
Views Total:119 views
Official Page:Go to website
Last Update:April 13, 2023
License:MIT

Preview:

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

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);
}

You Might Be Interested In:


Leave a Reply