A custom cursor enhances the readability of the document and grabs the user’s attention to a specific part of the webpage. Today we are going to learn how to create a custom cursor for a webpage using HTML, CSS, and Javascript.
Approach:
- Hide the default cursor.
- Define the classes which contain all the animations.
- Add and remove these classes dynamically when the mouse button is pressed or when the mouse pointer is moved.
Example: This example shows the use of the above-explained approach.
HTML
<!DOCTYPE html> <html> <body> <div class="custom-cursor"></div> </body> </html> |
CSS
:root { --color: 255, 71, 84; --cursor-size: 30px; } * { cursor: none; } html, body { height: 100%; } body { margin: 0; overflow: hidden; background: #121212; } .custom-cursor { position: absolute; z-index: 99; top: 0; left: 0; width: var(--cursor-size); height: var(--cursor-size); border: calc(var(--cursor-size) /30) solid #fff; border-radius: 50%; animation: cursor 800ms infinite alternate ease-in-out; pointer-events: none; } .custom-cursor::before { content: ""; display: block; width: calc(var(--cursor-size) / 2); height: calc(var(--cursor-size) / 2); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: calc(var(--cursor-size) / 6) solid rgba(var(--color), 0.5); border-radius: 50%; animation: cursor-before 800ms infinite alternate ease-in-out; } .custom-cursor.click { animation: cursor-click 800ms normal ease-in-out; } @keyframes cursor { from { transform: scale(1); border-color: #fff; } to { transform: scale(1.5); border-color: rgb(var(--color)); } } @keyframes cursor-before { from { transform: translate(-50%, -50%) scale(1); border-color: rgba(var(--color), 0.5); } to { transform: translate(-50%, -50%) scale(1.5); border-color: rgba(var(--color), 0.75); } } @keyframes cursor-click { 0%, 100% { transform: scale(1); } 50% { transform: scale(2.5); border-color: rgb(var(--color)); } } |
Javascript
const cursor = document .querySelector(".custom-cursor"); // Adding the animations when the // mouse button is clicked window.addEventListener("mousedown", (event) => { if (!cursor.classList.contains("click")) { cursor.classList.add("click"); setTimeout(() => { cursor.classList.remove("click"); }, 800); } }); // Getting the position of the cursor window.addEventListener("mousemove", (event) => { let x = event.pageX - cursor.offsetWidth / 2, y = event.pageY - cursor.offsetHeight / 2; cursor.style.left = `${x}px`; cursor.style.top = `${y}px`; }); |
Output: Click here to check the live Output.
