Cool cursor - how is it done?

A

Andreas39

New Member
Hey everyone,

I’ve got a quick question about custom cursors. On my site, I’ve got this little orange dot as my cursor (you can check it out here: Web design London).

But I recently came across Aid studio and noticed how cool their cursor is – it changes depending on where it is on the page. Like, it changes when hovering over different elements (text, buttons, images), and it just looks really smooth and interactive.

Does anyone know how I can achieve something like this? I’m guessing it involves some JavaScript and CSS, but I’m not entirely sure how to pull it off.
 
Andreas39 said:
Hey everyone,

I’ve got a quick question about custom cursors. On my site, I’ve got this little orange dot as my cursor (you can check it out here: Web design London).

But I recently came across Aid studio and noticed how cool their cursor is – it changes depending on where it is on the page. Like, it changes when hovering over different elements (text, buttons, images), and it just looks really smooth and interactive.

Does anyone know how I can achieve something like this? I’m guessing it involves some JavaScript and CSS, but I’m not entirely sure how to pull it off.
Click to expand...
I agree wtih @Stationery Direct

CSS for Basic Custom Cursor

Start by creating a custom cursor with basic CSS

Code: 
body {
  cursor: url('path/to/your/cursor-image.png'), auto; /* Replace with your custom image */
}

JavaScript to Change Cursor Based on Element

Code: 
// JavaScript to change cursor based on hovered element
document.addEventListener("DOMContentLoaded", function() {
  const cursor = document.querySelector(".custom-cursor"); // Add a custom cursor element to the DOM
  let cursorClass = '';

  document.querySelectorAll('button').forEach(button => {
    button.addEventListener('mouseenter', function() {
      cursor.classList.add('button-hover'); // Add a class when hovering over a button
    });
    button.addEventListener('mouseleave', function() {
      cursor.classList.remove('button-hover'); // Remove the class when leaving
    });
  });

  // Similar code can be added for other elements like images or text
});

CSS for Different Cursor States
Code: 
.custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  background-color: orange;
  border-radius: 50%;
  pointer-events: none;
  transition: all 0.2s ease;
}

.button-hover {
  background-color: red; /* Change the cursor when hovering over buttons */
  width: 30px;
  height: 30px;
}

To make the cursor feel smooth, use JavaScript to track the mouse position and move the cursor element accordingly
Code: 
document.addEventListener('mousemove', (e) => {
  const cursor = document.querySelector(".custom-cursor");
  cursor.style.left = `${e.pageX - cursor.offsetWidth / 2}px`;
  cursor.style.top = `${e.pageY - cursor.offsetHeight / 2}px`;
});


Should result in smooth, interactive cursor that changes when hovering over different elements. You can refine the CSS animations and JavaScript interactions based on the specifics of your design, adding more classes or animations for different states (hovering over links, images, etc.).
 
Thanks a lot for the explanation. I understand it better now. I will look at the CSS and JavaScript and try to make it nicer like you said. Really appreciate the help
 
You must log in or register to reply here.
Back
Top