Here is how you can add image in mouse cursor easily using the javascript. Follow this guide step by step.
HTML
Just place the html code between <body></body> tag.
<div class="cursor"></div>CSS
.cursor{ pointer-events:none; width:2rem; opacity:0; background-image:url(../img/cursor.png); background-size:100% 100%; background-repeat:no-repeat; backface-visibility:hidden; height:2rem; position:absolute; transform:translate(-50%,-50%); z-index:9999; transition:all 0.2s ease;}
Javascript
Just place this javascript code in the bottom of the page.
var mouseCursor = document.querySelector(".cursor");
window.addEventListener('mousemove',cursor);
function cursor(e){
mouseCursor.style.top = e.pageY + 'px';
mouseCursor.style.left = e.pageX + 'px';
mouseCursor.style.opacity = 1;
}
Be the first to post a comment.