CSS-Html-JavaScriptNo Comments

default thumbnail

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.

Add a comment