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=""></script>
    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);

In the footer area:

<div id="custom-cursor"></div>
    $(document).ready(function () {
      // Update the position of the custom cursor based on mouse movement
      $(document).mousemove(function (e) {
          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
Contact us today

About the author

Trusted by