Check out the full tutorial here: https://www.instagram.com/p/DAOiRcftpLz/
CSS CODE
<style>
body {
cursor: none;
min-height: 100%;
background: rgb(255, 255, 255);
}
position: fixed;
width: 50px;
height: 50px;
background: rgb(255 255 255);
border-radius: 50%;
top: var(--y, 0);
left: var(--x, 0);
transform: translate(-50%, -50%);
mix-blend-mode: difference;
pointer-events: none;
transition-duration: 0ms;
transition-timing-function: ease-out;
z-index: 999999!important;
}
#myCustomCursor.myCursorHoverState {
width: 50px;
height: 50px;
background: white;
}
/* Hide custom cursor on mobile */
@media only screen and (max-width: 768px) {
display: none;
}
body {
cursor: auto;
}
}
</style>
JS CODE
<script>
function createCustomCursor() {
let cursor = document.getElementById('myCustomCursor');
if (cursor) {
console.log('myCustomCursor already exist');
addCursorSpecialEffectToAllPageLinks(cursor);
} else {
cursor = document.createElement("div");
cursor.setAttribute("id", "myCustomCursor");
document.body.appendChild(cursor);
initCustomCursor(cursor);
addCursorSpecialEffectToAllPageLinks(cursor);
}
}
function initCustomCursor(cursor) {
document.body.onmousemove = function(e) {
cursor.style.setProperty('--x', (e.clientX) + 'px');
cursor.style.setProperty('--y', (e.clientY) + 'px');
}
}
function addCursorSpecialEffectToAllPageLinks(cursor) {
var links = document.querySelectorAll("a"); // Get page links
// This ״for loop״ is used to find all the page links and add the "myCursorHoverState" css class to create special effect on hover
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("mouseenter", function(event) {
console.log('In');
cursor.classList.add("myCursorHoverState"); // Add the hover class
}, false);
links[i].addEventListener("mouseleave", function(event) {
console.log('Out');
cursor.classList.remove("myCursorHoverState"); // Removethe hover class
}, false);
}
}
createCustomCursor();
</script>