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

Category: Animation , Javascript | March 23, 2023
Author:Volorf
Views Total:309 views
Official Page:Go to website
Last Update:March 23, 2023
License:MIT

Preview:

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

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;

You Might Be Interested In:


Leave a Reply