Vanilla-Tilt Js

Rahul Bhatt — Sat, 14 Oct 2023 04:23:06 +0000

A smooth 3D tilt JavaScript library forked from Tilt.js.

Installation using npm

npm i vanilla-tilt

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vanilla Tilt Js</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Arial, Helvetica, sans-serif;
      }

      .container {
        height: 100vh;
        width: 100%;
        background-color: #111;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .card {
        width: 300px;
        height: 400px;
        border-radius: 15px;
        text-align: center;
        color: white;
        display: flex;
        flex-direction: column;
        gap: 10px;
        background-color: black;
        border: 2px solid white;
        padding: 10px 15px;
        transform-style: preserve-3d;
        transform: perspective(1000px);
        transition: 0.4s all linear;
        padding: 20px 15px;
        overflow: hidden;
      }
      .card p {
        transform: translateY(100px);
        opacity: 0;
        transition: 0.2s ease;
      }

      .card:hover {
        border: 2px solid red;
        box-shadow: 0px 0px 12px 5px red;
      }
      .card:hover p {
        transform: translateY(0px);
        opacity: 1;
      }

      .innerElem {
        transform: translateZ(20px) translateY(-100px);
        opacity: 0;
        transition: 0.2s ease;
      }
      .card:hover .innerElem {
        opacity: 1;
        transform: translateY(0px);
      }
      .card h1 {
        transition: 0.3s ease;
        font-size: 2.5rem;
      }
      .card:hover h1 {
        transform: translateY(-30px);
        opacity: 0;
        font-size: 0px;
        letter-spacing: 40px;
      }

      .innerElem img {
        object-fit: cover;
        aspect-ratio: 1/1;
        width: 140px;
        border-radius: 50%;
        transition: 0.5s all ease-in-out linear;
      }

      .card:hover img {
        outline: 4px solid black;
        outline-offset: 4px;
      }
      p button {
        border: none;
        padding: 8px 15px;
        border-radius: 20px;
        cursor: pointer;
        transition: 0.4s all ease;
      }
      p button:hover {
        background-color: #111;
        border: 1.5px solid white;
        color: white;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="card" data-tilt data-tilt-scale="1.1">
        <div class="innerElem">
          <img
            class="image"
            src="https://cdn.pixabay.com/photo/2014/04/03/10/32/user-310807_640.png"
            alt=""
          />
          <h3>Susan</h3>
        </div>
        <h1>Hover Me</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem
          exercitationem ipsum quo! Temporibus magni non doloribus quam quos
          ipsa animi eius dolores, sunt exercitationem iure. <br /><br />
          <button>Read more</button>
        </p>
      </div>
    </div>
    <script type="text/javascript" src="vanilla-tilt.js"></script>
    <script type="text/javascript">
      VanillaTilt.init(document.querySelector(".card"), {
        max: 25,
        speed: 400,
        glare: true
      });
      VanillaTilt.init(document.querySelector(".image"), {
        max: 25,
        speed: 400
      });

      //It also supports NodeList
      // VanillaTilt.init(document.querySelectorAll(".your-element"));
    </script>
  </body>
</html>

Methods:

const element = document.querySelector(".js-tilt");
VanillaTilt.init(element);

// Destroy instance
element.vanillaTilt.destroy();

// Get values of instance
element.vanillaTilt.getValues();

// Reset instance
element.vanillaTilt.reset();

// It also supports NodeList
const elements = document.querySelectorAll(".js-tilt");
VanillaTilt.init(elements);

Don't forget to download and link the vanilla-tilt.js file(if working with the static sites)

DEV Community: Rahul Bhatt

Vanilla-Tilt Js