top of page

HOME

[HOME]

PROJECTS

[PROJECTS]

SERVICES

[SERVICES]

ABOUT

[ABOUT]

CONTACT

[CONTACT]

Negative Dot Cursor Wix Studio


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>


bottom of page