DEV Community

Cover image for Vanilla-Tilt Js
Rahul Bhatt
Rahul Bhatt

Posted on

1

Vanilla-Tilt Js

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

Installation using npm

npm i vanilla-tilt
Enter fullscreen mode Exit fullscreen mode


<!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>
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more