Smooth 3D Parallax Tilt Hover Effect – Card3d.js

Preview:

Description:

Card3d.js is a tiny JavaScript library that creates interactive 3D parallax tilt hover effects on any element. Inspired by the Tilt.js jQuery plugin.

It offers a range of features, including glare, scaling, custom perspectives and deltas, full-page listening, and mobile gyroscope support.

Feel free to use it in your next project to transform static images, article lists, or other UI components into 3D cards that react and respond to user input.

How to use it:

1. Install and import the card3d component.

# NPM
$ npm i card3d

import Card3d from "card3d";

<!-- OR -->
<script src="./dist/card3d.js"></script>

2. Initialize the card3d component with HTML data attribute:

<div class="card" data-card3d></div>

3. Or via JavaScript.

const glare = new Card3d(document.querySelector(".card"), {
      // options here
});

4. Config the hover effect with the following options.

const glare = new Card3d(document.querySelector(".card"), {
      delta: 10,
      perspective: 500,
      startX: 0,
      startY: 0,
      glareOpacity: 0.5,
      axis: "all",
      scale: 1,
});

5. You can also pass the options via HTML data-OPTION attributes as follows:

<div class="card" 
     data-card3d
     data-card3d-glare
     data-card3d-glare-opacity="0.7"
     data-card3d-perspective="1000"
     data-card3d-delta="40"
     data-card3d-reverse="true"
     data-card3d-no-reset="true"
     data-card3d-full-page-listening="true"
     data-card3d-scale="1.1"
     data-card3d-start-x="20" 
     data-card3d-start-y="20"
     data-card3d-axis="x"
     data-card3d-gyroscopie
     data-card3d-stop="true"></div>

6. API methods.

instance.updateConfig();
instance.stop();
instance.start();

Changelog:

v2.6.5 (05/26/2023)

• Fixed updateConfig
• Removed private method setConfigFromAttributes for function getConfigFromAttributes