Mouse Follower Cat HTML CSS JavaScript

1,309 mariemalmushati

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cat Mouse Follower</title>
    <style>
        body {
            margin: 0;
            overflow: hidden; /* Prevents scrollbars if the cat goes slightly out of bounds */
            height: 100vh; /* Ensures the body takes full viewport height */
            background-color: #f0f0f0; /* Light background for contrast */
            cursor: none; /* Hides the default mouse cursor */
        }

#cat-follower {
            /* Cat head */
            width: 45px;
            height: 35px;
            background-color: #4a332a; /* Dark brown color for the cat */
            border-radius: 50% 50% 35% 35%; /* Rounded top, slightly flatter bottom for head shape */
            position: fixed; /* Positions the cat relative to the viewport */
            pointer-events: none; /* Important: Allows mouse events to pass through the cat to elements beneath */
            z-index: 9999; /* Ensures the cat stays on top of other content */
            transform: translate(-50%, -50%); /* Centers the cat element on the mouse cursor */
            box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow for depth */
            transition: left 0.01s linear, top 0.01s linear; /* Very subtle transition for smoother follow */
        }

#cat-follower::before,
        #cat-follower::after {
            /* Cat ears */
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-left: 12px solid transparent; /* Base width of the ear */
            border-right: 12px solid transparent; /* Base width of the ear */
            border-bottom: 18px solid #4a332a; /* Height and color of the ear */
            top: -10px; /* Position above the head */
            z-index: -1; /* Places ears behind the head */
            transform-origin: bottom center; /* Rotate around the bottom center of the ear */
        }

#cat-follower::before {
            left: 0px; /* Position for the left ear */
            transform: rotate(-25deg); /* Angle the left ear */
        }

#cat-follower::after {
            right: 0px; /* Position for the right ear */
            transform: rotate(25deg); /* Angle the right ear */
        }

/* Cat Eyes */
        #cat-follower .eye {
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: white;
            border-radius: 50%;
            top: 10px;
            border: 1px solid #333; /* Outline for the eye */
            box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
        }

#cat-follower .eye::before {
            /* Pupil */
            content: '';
            position: absolute;
            width: 4px;
            height: 4px;
            background-color: black;
            border-radius: 50%;
            top: 2px;
            left: 2px;
        }

#cat-follower .eye.left {
            left: 8px; /* Position for the left eye */
        }

#cat-follower .eye.right {
            right: 8px; /* Position for the right eye */
        }

/* Cat Nose */
        #cat-follower .nose {
            position: absolute;
            width: 8px;
            height: 5px;
            background-color: #f7a7b7; /* Pink color for the nose */
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; /* Oval shape for the nose */
            top: 20px;
            left: 50%;
            transform: translateX(-50%); /* Center the nose horizontally */
        }
    </style>
</head>
<body>
    
    <div id="cat-follower">
        <div class="eye left"></div>
        <div class="eye right"></div>
        <div class="nose"></div>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse-Following Cat</title>
    <style>
        body {
            margin: 0;
            overflow: hidden; /* Hide scrollbars if cat goes off-screen */
            cursor: none; /* Hide default cursor to make the cat the primary follower */
            background-color: #f0f0f0; /* Light background for visibility */
        }

#cat {
            position: absolute;
            /* Initial position will be set by JavaScript */
            /* This transform ensures the cat's center is at (catX, catY) */
            transform: translate(-50%, -50%);
            z-index: 1000; /* Ensure the cat is on top of other content */
            pointer-events: none; /* Cat should not block mouse events on elements underneath */
            /* Overall size of the cat container for easier relative positioning of its parts */
            width: 120px;
            height: 80px;
        }

.cat-body {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 60px;
            height: 30px;
            background-color: #555; /* Dark grey cat body */
            border-radius: 15px;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
        }

.cat-head {
            position: absolute;
            top: 15px;
            left: 0px;
            width: 30px;
            height: 30px;
            background-color: #555;
            border-radius: 50%; /* Circular head */
            box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
        }

.cat-tail {
            position: absolute;
            top: 25px;
            left: 70px; /* Position relative to the cat container */
            width: 30px;
            height: 10px;
            background-color: #555;
            border-radius: 0 10px 10px 0; /* Rounded tail end */
            transform-origin: 0% 50%; /* Rotate from the base of the tail */
            transform: rotate(15deg); /* Slightly curved tail */
            box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
        }

.cat-leg {
            width: 10px;
            height: 25px;
            background-color: #444; /* Slightly darker legs */
            border-radius: 0 0 5px 5px; /* Rounded bottom for paws */
            position: absolute;
            box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
        }

/* Position each leg relative to the #cat container */
        .leg1 { top: 45px; left: 25px; } /* Front-left leg */
        .leg2 { top: 45px; left: 55px; } /* Front-right leg */
        .leg3 { top: 45px; left: 75px; } /* Back-left leg */
        .leg4 { top: 45px; left: 105px; } /* Back-right leg */
    </style>
</head>
<body>

const catElement = document.getElementById('cat');

// Update mouse coordinates on mouse movement
        document.addEventListener('mousemove', (e) => {
            mouseX = e.clientX;
            mouseY = e.clientY;
        });

function animateCat() {
            // Calculate the target position for the cat, offset from the mouse cursor
            // The cat will follow to the bottom-right of the mouse cursor
            const targetX = mouseX + offsetDistance;
            const targetY = mouseY + offsetDistance;

// Ease the cat's current position towards the target position for smooth movement
            catX += (targetX - catX) * easingFactor;
            catY += (targetY - catY) * easingFactor;

// Apply the new position using CSS transform for performance and smoothness
            // The translate(-50%, -50%) in CSS centers the cat element on the calculated (catX, catY)
            catElement.style.transform = `translate(${catX}px, ${catY}px) translate(-50%, -50%)`;

// Request the next animation frame to continue the movement
            requestAnimationFrame(animateCat);
        }

// Start the animation loop
        animateCat();
    </script>

</body>
</html>

CSS

Mouse Follower Cat HTML CSS JavaScript

Recommended