Mouse cursor effects JavaScript with cool hover effect

RH Suman
June 20, 2022

49

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.
Mouse cursor effects JavaScript with cool hover effect

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');
  });
})

Preview:

Tags

Cursor effects JavaScript

Subscribe

Get Updates

Subscribe our newsletter to get the last update into your inbox!

Please insert email address.

Recommended Posts