Cool 3D hover effect for your awesome web project
Have you seen these amazing 3D hover effect on Apple TV? Have you known that you can easily make similar effect? Just like that!
Three simple steps
- Download it;
- Add
hover3D.jsto your page; - Create a new
Hover3D()instance.
How to add hover3D.js to my page
Put a hover3D.js link in the <head> section.
<!-- A 3d-hover-effect link -->
<script src="hover3D.js"></script>
</head>How to create 3D hover effect
It's just a single line of code!
<!-- Create a HoverEffect object and pass an id/className of HTML element(s) you want to create the effect to -->
<script>
let myHover3D = new Hover3D(".card"); // Yep! That's it.
</script>
</body>How to customize it
You have a bunch of properties you can tweak to control the effect.
// X-axis offset
myHover3D.xOffset = 10;
// Y-axis offset
myHover3D.yOffset = 10;
// Attack. How fast the element reacts to cursor movement
myHover3D.attack = 0.1;
// Release. How fast the element repairs its initial state when your cursor leaves it
myHover3D.release = 0.5;
// Sets the distance between the user and the z=0 plane
myHover3D.perspective = 500;