Created
September 15, 2023 10:48
-
-
Save zainaali/f8d8eca744572d01971804bc5e63a2ab to your computer and use it in GitHub Desktop.
Add color dot cursor instead of default cursor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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