How to Create Custom Hover Animation (CSS)

Introduction

In the ever-evolving landscape of web development, creating engaging and interactive user experiences is paramount. One such delightful feature is the Custom Hover Animation, often seen as a dynamic cursor that reacts to user interactions. In this guide, we’ll explore a captivating implementation of this concept using HTML, CSS, and JavaScript. Let’s dive into the details and uncover the magic behind this Custom Hover Animation.

HTML Structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom Hover Animation</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />
  </head>
  <body>
    <div class="custom-cursor">
      <div class="custom-icon"></div>
      <div class="custom-link"></div>
    </div>
    <nav class="custom-nav">
      <a href="" id="custom-home">Home</a>
      <a href="">Services</a>
      <a href="">About</a>
      <a href="">Contact</a>
    </nav>
  </body>
</html>

HTML

HTML Breakdown:

Custom Cursor Container: The container for the animated cursor.
Navigation Menu: Links where the animation will be applied.

CSS Styling

:root {
  --circle-size: 25px;
  --letter-width: 14px;
  --letter-space: 60px;
  --font-size: 10px;
  --letter-spacing-x: 20;
  --second-circle-border: 4px;
  --second-circle-size: 35px;
}

body {
  font-family: "Ubuntu", sans-serif;
  margin: 0 auto;
  background-color: #191a1e;
  color: white;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-cursor {
  position: absolute;
  width: 25px;
  height: 25px;
  background: white;
  border-radius: 100%;
  cursor: none;
  z-index: 100;
  transition: background 0.1s ease;
  mix-blend-mode: difference;
}

.custom-cursor .custom-link {
  position: absolute;
  top: 0;
  color: white;
  animation: spin 5s infinite linear;
  transform-origin: center center;
  width: 25px;
  height: 25px;
}

.custom-cursor .custom-icon {
  width: var(--circle-size);
  height: var(--circle-size);
  line-height: var(--circle-size);
  position: absolute;
  top: 0;
  text-align: center;
}

.custom-cursor:after {
  display: block;
  content: "";
  width: 35px;
  height: 35px;
  border-radius: 100%;
  z-index: -1;
  border: var(--second-circle-border) solid white;
  left: -9px;
  top: -9px;
  position: relative;
  transition: opacity 0.2s ease, transform 0.3s ease;
}

.custom-cursor.active {
  background: rgba(0, 0, 0, 0);
}

.custom-cursor.active:after {
  opacity: 0;
  transform: scale(2);
}

.custom-nav {
  display: flex;
}

.custom-nav a {
  text-decoration: none !important;
  color: white;
  font-weight: 700;
  font-size: 30px;
  padding: 20px 40px;
}

.custom-circle-letter {
  position: absolute;
  width: var(--letter-width);
  text-align: center;
  height: calc(var(--circle-size) + var(--letter-space));
  left: calc(var(--circle-size) / 2 - var(--letter-width) / 2);
  top: calc(var(--letter-space) / 2 * -1);
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--font-size);
}

.custom-circle-letter-bottom {
  width: var(--letter-width);
  height: var(--letter-width);
  text-align: center;
  position: absolute;
  bottom: 0;
  transform: rotate(180deg);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

CSS

CSS Highlights:

Root Variables: Defines variables for size, spacing, and styling.
Cursor Styles: Styles for the custom cursor, link, and icon.
Animation Styles: Keyframes for spinning animation.

JavaScript Logic

const customLetterSpacing = getComputedStyle(
  document.querySelector(":root")
).getPropertyValue("--letter-spacing-x");

var customCursor = document.querySelector(".custom-cursor");
var customCursorLink = document.querySelector(".custom-link");
var customCursorIcon = document.querySelector(".custom-icon");

var customIconMap = {
  Home: "fa-house",
  Services: "fa-bell",
  About: "fa-user",
  Contact: "fa-envelope",
};

document.addEventListener("mousemove", (event) => {
  customCursor.style.left =
    event.clientX - customCursor.offsetWidth / 2 + "px";
  customCursor.style.top =
    event.clientY - customCursor.offsetHeight / 2 + "px";

  customCursor.classList.remove("active");
  customCursorLink.innerHTML = "";
  customCursorIcon.innerHTML = "";

  let customElements = document.elementsFromPoint(
    event.clientX,
    event.clientY
  );
  customElements.forEach((elem) => {
    if (elem.tagName == "A") {
      customCursor.classList.add("active");

      elem.innerHTML.split("").forEach((letter, i) => {
        var customCircleLetter = document.createElement("div");
        customCircleLetter.classList.add("custom-circle-letter");
        customCircleLetter.innerHTML = letter;
        customCircleLetter.style.transform =
          "rotate(" + i * customLetterSpacing + "deg)";

        var customCircleLetterBottom = document.createElement("div");
        customCircleLetterBottom.classList.add(
          "custom-circle-letter-bottom"
        );
        customCircleLetterBottom.innerHTML = letter;
        customCircleLetter.appendChild(customCircleLetterBottom);

        customCursorLink.appendChild(customCircleLetter);
      });

      if (customIconMap[elem.innerHTML]) {
        var customCircleIcon = document.createElement("i");
        customCircleIcon.classList.add("fa");
        customCircleIcon.classList.add(customIconMap[elem.innerHTML]);
        customCursorIcon.appendChild(customCircleIcon);
      }
    }
  });
});

JavaScript

JavaScript Highlights:

Event Listener: Listens for mouse movement on the document.
Cursor Positioning: Updates the position of the custom cursor based on mouse coordinates.
Interactive Elements: Detects interactive elements (links) under the cursor.
Dynamic Animation: Dynamically creates and adds elements for a circular animation.

Key Concepts

CSS Variables: Utilizing root-level CSS variables to maintain consistency and ease of adjustment across the design.
Mix-blend-mode: Employing mix-blend-mode for a difference effect, enhancing the visibility of the cursor on diverse backgrounds.
Dynamic Element Creation: Dynamically creating HTML elements in JavaScript to achieve interactive and animated effects.
Event Handling: Utilizing event listeners to respond to mouse movements and interactions.
Keyframe Animations: Implementing keyframe animations for a smooth and engaging visual experience.

Conclusion

The Custom Hover Animation demonstrated in this guide adds a layer of creativity and dynamism to your website’s user interface. By understanding the interplay of HTML, CSS, and JavaScript, you can adapt and expand upon this concept to create unique and visually appealing interactions.

Experiment with colors, sizes, and additional features to tailor this animation to your brand or project. Embrace the possibilities that custom hover animations offer and elevate your web design to new heights!

Happy coding!