Mouse cursor effects JavaScript with cool hover effect

Custom cursors are popular in website design because they provide an opportunity to wow visitors who are expectation the default mouse pointer of their operating system. They’re especially popular on creative websites, like agency and designer portfolios. Below are real websites with unique cursor effects.

This Circle cursor is trailed by a semi-transparent dot when moving. However, it turns into an after shadow when the cursor lands on a link.

HTML Code:

<div class="cursor"></div>
<div class="cursor2"></div>

CSS Code:

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

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

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

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

JavaScript Code:

// Custom Cursor
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');
  });
})
RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply