Have you seen these amazing 3D hover effect on Apple TV? Have you known that you can easily make similar effect? Just like that!
- Downoload it;
- Add
hover3D.jsto your page; - Create a new
Hover3D()instance.
Put a hover3D.js link in the <head> section.
<!-- A 3d-hover-effect link -->
<script src="hover3D.js"></script>
</head>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>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