JavaScript Cursor

This code snippet helps you to create a styled rounded cursor. It is a block of JavaScript code that creates a custom cursor on a webpage. It starts by selecting the cursor element and its inner element, as well as all anchor elements on the page. It then listens for mouse movement events and updates the position of the cursor accordingly. It also listens for mouse click events to add and remove classes that change the cursor’s appearance. Finally, it adds event listeners to all anchor elements to add and remove a class that changes the cursor’s appearance when hovering over them. Overall, this code creates a dynamic and interactive cursor for a webpage.

How to Create JavaScript Cursor

Create the HTML structure for the cursor as follows:

<section>
  <h1>Custom Cursor</h1>
  <a href="#">Hover Me</a>
</section>
<div class="cursor"></div>
<div class="cursor2"></div>

Now, style the cursor using the following CSS styles:

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

* {
  cursor: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  width: 100%;
  height: 100%;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

h1 {
  font-family: montserrat;
  font-size: 40px;
}

a {
  font-family: Montserrat;
  position: relative;
  text-decoration: none;
}

a:after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  display: block;
  margin-top: 0px;
  left: 0%;
  background: black;
  transition: width .3s ease;
}

a:hover:after{
  width: 100%;
  left: 0%;
  background: black;
}

.cursor {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 1px solid black;
  transition: all 200ms ease-out;
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  transform: translate(calc(-50% + 15px), -50%);
}

.cursor2 {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: black;
  opacity: .3;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width .3s, height .3s, opacity .3s;
}

.hover {
  background-color: red;
  opacity: 0.5;
}

.cursorinnerhover {
  width: 50px;
  height: 50px;
  opacity: .5;
}

Finally, add the following JavaScript function for its functionality:

// UPDATE: I was able to get this working again... Enjoy!

var cursor = document.querySelector('.cursor');
var cursorinner = document.querySelector('.cursor2');
var a = document.querySelectorAll('a');

document.addEventListener('mousemove', function(e){
  var x = e.clientX;
  var y = e.clientY;
  cursor.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`
});

document.addEventListener('mousemove', function(e){
  var x = e.clientX;
  var y = e.clientY;
  cursorinner.style.left = x + 'px';
  cursorinner.style.top = y + 'px';
});

document.addEventListener('mousedown', function(){
  cursor.classList.add('click');
  cursorinner.classList.add('cursorinnerhover')
});

document.addEventListener('mouseup', function(){
  cursor.classList.remove('click')
  cursorinner.classList.remove('cursorinnerhover')
});

a.forEach(item => {
  item.addEventListener('mouseover', () => {
    cursor.classList.add('hover');
  });
  item.addEventListener('mouseleave', () => {
    cursor.classList.remove('hover');
  });
})

That’s all! hopefully, you have successfully created the JavaScript cursor. If you have any questions or suggestions, feel free to comment below.