3D Hover Effect Inspired By Apple TV – Hover3D.js

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;