Author: | Volorf |
---|---|
Views Total: | 172 views |
Official Page: | Go to website |
Last Update: | March 23, 2023 |
License: | MIT |
Preview:

Description:
A tiny and easy-to-use JavaScript library to create a stunning 3D hover effect that reacts to cursor movement.
It is inspired by Apple TV and provides unparalleled depth and immersion when showing designs to your users.
How to use it:
1. Download and load the Hover3D.js library.
<script src="hover3D.js"></script>
2. Initialize the Hover3D on your element. That’s it.
<div class="card"> ... Layer 1 ... ... Layer 2 ... ... ... ... Layer n ... </div>
3. Customize the hover effect by overriding the default parameters.
// X-axis offset myHover3D.xOffset = 10; // Y-axis offset myHover3D.yOffset = 10; // How fast the element reacts to cursor movement myHover3D.attack = 0.1; // 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;