Create a custom mouse cursor for website

Posted by Lee on January 19, 2024 - Estimated reading time: 2 minutes

To create a dot as the website cursor with a 15px width and a bounce effect using jQuery, you can follow these steps. First, include jQuery in your HTML document:

In the head area:

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <style>
    body {
      cursor: none; /* Hide the default cursor */
    }
    #custom-cursor {
      position: absolute;
      width: 15px;
      height: 15px;
      background-color: #ff0000; /* Change the color as needed */
      border-radius: 50%;
      pointer-events: none; /* Make sure the cursor does not interfere with other elements */
      animation: bounce 0.5s infinite alternate; /* Add bounce animation */
    }
    @keyframes bounce {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-10px);
      }
    }
  </style>

In the footer area:

<div id="custom-cursor"></div>
  <script>
    $(document).ready(function () {
      // Update the position of the custom cursor based on mouse movement
      $(document).mousemove(function (e) {
        $('#custom-cursor').css({
          left: e.pageX - 7.5, // Adjust the offset based on the half of the width
          top: e.pageY - 7.5 // Adjust the offset based on the half of the height
        });
      });
    });
  </script>
Contact us today

About the author

Trusted by

logo