You are currently viewing 3D Tilt Hover Effect with Vanilla Tilt JS – Elementor Tutorial

3D Tilt Hover Effect with Vanilla Tilt JS – Elementor Tutorial

(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)

Get Elementor Pro Today –

1 – Elementor Pro

Interactive 3D Tilt Hover Effects – Elementor and Vanilla Tilt JS Tutorial

In this tutorial, we will be using vanilla tilt js to create an amazing hover effect. As we are using javascript library, it makes it easy to add/remove effects to our elements.

John Doe

Executive Direction

John Doe

3D Parallax Tilt

John Doe

Glare

John Doe

No Reset

John Doe

Scale and Reverse

John Doe

Only X

John Doe

Only Y

John Doe

FullPage & Gyroscrope (Mobile)

Full Code for Tilt Effect – Elementor

  1. dm-3d-tilt is the CSS class of the Element that should have tilt effect.
  2. dm-3d-element is the CSS class that needs to be placed closer to viewer. We change Z values in translate3D(Xpx, Ypx, Zpx) to place it closer or farther from us. X value moves it left and right, Y moves it up and down.
  3. max is how much angle our element should tilt.
  4. speed is the transition of enter/exit animation. i,e When you hover on your element, how quick it should tilt (only for enter/exit hover).
  5. perspective decides how harsh the tilt effect should be. Lower value will give stronger tilt.
  6. glare and max-glare adds a shine effect.
  7. reset is set to true by default, but if you make it false, our element would stay tilted when hovered out.
  8. reverse: true makes the tilt effect be away from our cursor.
  9. scale decides how much our element should scale when hovered.
  10. axis: ‘x’ or axis: ‘y’ is used to limit movement in X-axis or Y-axis.
  11. gyroscope allows our element to tilt based on mobile phones movement.
  12. full-page-listening makes our element tilt based on our cursor location in our viewport.
 
NOTE : The below code is just for reference, simply remove any unnecessary stuff. Also change values including numbers, true/false to your desired effect.
				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.1/vanilla-tilt.min.js" integrity="sha512-wC/cunGGDjXSl9OHUH0RuqSyW4YNLlsPwhcLxwWW1CR4OeC2E1xpcdZz2DeQkEmums41laI+eGMw95IJ15SS3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<style>

    .dm-3d-tilt {
        
           transform-style: preserve-3d;
        
        
    }
    
    .dm-3d-element {
        
         transform: translate3D(0px, 0px, 50px);
        
    }
    
    
</style>

<script>

document.addEventListener("DOMContentLoaded", () => {

    const dm3Dtilt = document.querySelectorAll('.dm-3d-tilt');
    
    VanillaTilt.init(dm3Dtilt, {
		max: 25,
		speed: 200,
		perspective: 1000,
		glare: true,
        "max-glare": 0.5,
        reset: true,
        reverse: false,
        scale:1,
        axis: 'x',
        gyroscope: true,
        gyroscopeMinAngleX: -45,
        gyroscopeMaxAngleX: 45,
        gyroscopeMinAngleY: -45,
        gyroscopeMaxAngleY: 45,
        gyroscopeSamples: 10,
        "full-page-listening":  false
		 
	});
    
});

</script>
				
			

Leave a Reply