<div id="rjs_cursor" class="rjs-cursor">
<div class="rjs-cursor-icon"></div>
</div>
.rjs-cursor {
width: 12px;
height: 12px;
position: fixed; /* Fixed position.. */
top: 0; /* at the top left.. */
left: 0;
z-index: 999999; /* above everything else. */
pointer-events: none; /* Cant't be clicked. */
transition: none; /* Cursor is always accurate */
opacity: 0; /* Hidden by default */
}
.rjs-cursor-icon { /* Styling for the visible part */
width: 100%;
height: 100%;
border-radius: 100%; /* Circle */
background-color: rgba(123, 123, 123, 0.7); /* Backup value */
}
.rjs-cursor.rjs_cursor_visible { opacity: 1; }
.rjs-cursor.rjs_cursor_hidden { opacity: 0; }
body { min-width: 100vw; min-height: 100vh; margin: 0; }
var rjs_cursor = document.getElementById("rjs_cursor"); //Getting the cursor
var body = document.querySelector("body"); //Get the body element
//Functions for showing and hiding the cursor
//They are referenced the
function rjs_show_cursor(e) { //Function to show/hide the cursor
if(rjs_cursor.classList.contains('rjs_cursor_hidden')) {
rjs_cursor.classList.remove('rjs_cursor_hidden');
}
rjs_cursor.classList.add('rjs_cursor_visible');
}
function rjs_hide_cursor(e) { if(rjs_cursor.classList.contains('rjs_cursor_visible')) {
rjs_cursor.classList.remove('rjs_cursor_visible');
}
rjs_cursor.classList.add('rjs_cursor_hidden');
}
function rjs_mousemove(e) { //Function to correctly position the cursor
rjs_show_cursor(); //Toggle show/hide
var rjs_cursor_width = rjs_cursor.offsetWidth * 0.5;
var rjs_cursor_height = rjs_cursor.offsetHeight * 0.5;
var rjs_cursor_x = e.clientX - rjs_cursor_width; //x-coordinate
var rjs_cursor_y = e.clientY - rjs_cursor_height; //y-coordinate
var rjs_cursor_pos = `translate(${rjs_cursor_x}px, ${rjs_cursor_y}px)`;
rjs_cursor.style.transform = rjs_cursor_pos;
}
//Eventlisteners
window.addEventListener('mousemove', rjs_mousemove); //Attach an event listener
body.addEventListener('mouseleave', rjs_hide_cursor);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.