Skip to content

Instantly share code, notes, and snippets.

@zainaali

zainaali/cursor.html

Created September 15, 2023 10:48
Show Gist options
  • Save zainaali/f8d8eca744572d01971804bc5e63a2ab to your computer and use it in GitHub Desktop.
Save zainaali/f8d8eca744572d01971804bc5e63a2ab to your computer and use it in GitHub Desktop.
Download ZIP
Add color dot cursor instead of default cursor
Raw
cursor.html
<!-- Put this html code after <body> tag -->
<div class="mouse-cursor cursor-outer"></div>
<div class="mouse-cursor cursor-inner"></div>
<!--Put this js code in footer -->
<script>
jQuery(document).ready(function($) {
function mousecursor() {
console.log("move mouse");
if (jQuery("body")) {
const e = document.querySelector(".cursor-inner"),
t = document.querySelector(".cursor-outer");
let n, i = 0,
o = !1;
window.onmousemove = function (s) {
o || (t.style.transform = "translate(" + s.clientX + "px, " + s.clientY + "px)"), e.style.transform = "translate(" + s.clientX + "px, " + s.clientY + "px)", n = s.clientY, i = s.clientX
}, jQuery("body").on("mouseenter", "a, .cursor-pointer", function () {
e.classList.add("cursor-hover"), t.classList.add("cursor-hover")
}), jQuery("body").on("mouseleave", "a, .cursor-pointer", function () {
jQuery(this).is("a") && jQuery(this).closest(".cursor-pointer").length || (e.classList.remove("cursor-hover"), t.classList.remove("cursor-hover"))
}), e.style.visibility = "visible", t.style.visibility = "visible"
}
};
if( jQuery(".mouse-cursor").size() ){
mousecursor();
}
});
</script>
<!--add this in css-->
<style>
body {
position: relative;
cursor: none;
}
.elementor-editor-active .mouse-cursor {
display: none !important;
}
.cursor-outer {
margin-left: -15px;
margin-top: -15px;
width: 40px;
height: 40px;
border: 2px solid #AE0850;
box-sizing: border-box;
z-index: 10000000;
opacity: 1;
transition: all .08s ease-out;
}
.mouse-cursor {
position: fixed;
left: 0;
top: 0;
pointer-events: none;
border-radius: 50%;
transform: translateZ(0);
}
.cursor-inner {
margin-left: 2px;
margin-top: 2px;
width: 6px;
height: 6px;
z-index: 10000001;
background-color: #AE0850;
transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment