Custom mouse cursor website with Elementor Pro (NO PLUGIN)
hello, I’m Kaycinho, The Digital Alchemist, and today I’m going to teach you how to create a custom mouse cursor that magically snaps to elements, and we’ll do that with Elementor Pro coupled with a script.
Let’s give credit where it’s due: this tutorial is based on the great, yet lightweight MagicMouse.JS script.
Custom Mouse Cursor With Elementor Pro Tutorial
This tutorial is video based of course, but in case you need some time stamps :
- 0:00 – Custom mouse cursor website with Elementor Pro (NO PLUGIN)
- 0:30 – What we’re going to build
- 1:14 – The magic we’ll be using
- 1:45 – Pre-requisites
- 2:18 – Setting up the custom cursor
- 5:30 – Tweaking the options
Css Code
Step 1 – Magic Mouse
In Wp > Elementor > Custom Code -> create a new document with the following code:
<script type="text/javascript">
"use strict";function magicMouse(e){if((e=e||{}).outerWidth=e.outerWidth||30,e.outerHeight=e.outerHeight||30,e.cursorOuter=e.cursorOuter||"circle-basic",e.hoverEffect=e.hoverEffect||"circle-move",e.hoverItemMove=e.hoverItemMove||!1,e.defaultCursor=e.defaultCursor||!1,"disable"!=e.cursorOuter){var t=document.createElement("div");t.setAttribute("id","magicMouseCursor"),document.body.appendChild(t);var r=document.getElementById("magicMouseCursor")}if(!e.defaultCursor){document.body.style.cursor="none";var s=document.createElement("div");s.setAttribute("id","magicPointer"),document.body.appendChild(s);var o=document.getElementById("magicPointer")}if(r){r.style.width=e.outerWidth+"px",r.style.height=e.outerHeight+"px";var i=e.outerWidth,a=e.outerHeight,n=e.outerWidth,c=e.outerHeight}var u=0,d=0,l=0,m=0,h=!1;document.addEventListener("mousemove",(function(e){l=e.clientX,m=e.clientY,setTimeout(()=>{h||(u=e.clientX-i/2,d=e.clientY-a/2)},50)})),document.querySelectorAll(".magic-hover").forEach((t,r)=>{t.addEventListener("mouseenter",r=>{switch(e.hoverEffect){case"circle-move":f(t),e.hoverItemMove&&b(r,t);break;case"pointer-blur":y(t,"pointer-blur");break;case"pointer-overlay":y(t,"pointer-overlay")}}),t.addEventListener("mouseleave",r=>{switch(t.style.transform="translate3d(0,0,0)",e.hoverEffect){case"circle-move":g();break;case"pointer-blur":p("pointer-blur");break;case"pointer-overlay":p("pointer-overlay")}})});var v=()=>{r&&(r.style.transform="matrix(1, 0, 0, 1, "+u+", "+d+")",r.style.width=i+"px",r.style.height=a+"px"),o&&(o.style.transform="matrix(1, 0, 0, 1, "+l+", "+m+") translate3d(-50%, -50%, 0)"),requestAnimationFrame(v)};requestAnimationFrame(v);const f=e=>{if(h=!0,r){r.style.transition="transform 0.2s, width 0.3s, height 0.3s, border-radius 0.2s",r.classList.add("is-hover");var t=event.currentTarget.getBoundingClientRect();e.classList.contains("magic-hover__square")?(r.classList.add("cursor-square"),u=t.left,d=t.top,i=t.width,a=t.height):(u=t.left,d=t.top,i=t.width,a=t.height)}o&&o.classList.add("is-hover")},g=()=>{h=!1,r&&(i=n,a=c,r.style.transition="transform 0.07s, width 0.3s, height 0.3s, border-radius 0.2s",r.classList.remove("cursor-square"),r.classList.remove("is-hover")),o&&o.classList.remove("is-hover")},y=(e,t)=>{o&&o.classList.add(t)},p=e=>{o&&o.classList.remove(e)},b=(e,t)=>{e.clientX,e.clientY,t.addEventListener("mousemove",e=>{t.style.transform="matrix(1,0,0,1,"+(e.offsetX-e.target.offsetWidth/2)/2+", "+(e.offsetY-e.target.offsetHeight/2)/2+")"})}}
</script>
Step 2 – Magic Options
In Wp > Elementor > Custom Code -> create a new document with the following code:
<script type="text/javascript">
options = {
"cursorOuter": "circle-basic",
"hoverEffect": "circle-move",
"hoverItemMove": false,
"defaultCursor": false,
"outerWidth": 41,
"outerHeight": 41
};
magicMouse(options);
</script>
Step 3 – Magic Css
While editing any page with Elementor Pro, click on the hamburger icon in the top left of the window, the click on Site Settings > Custom Css and paste the following code:
@media only screen and (min-width: 1367px) {
body #magicMouseCursor {
z-index:10000000!important;
position: fixed;
width: 35px;
height: 35px;
border: 1px solid #fff;
background: rgba(0,0,0,0.2);
border-radius: 50%;
z-index: 9999;
left: 0;
top: 0;
transition: transform 0.07s, width 0.3s, height 0.3s;
pointer-events: none; }
body #magicMouseCursor.cursor-square {
border-radius: 0; }
body #magicPointer {
z-index:10000000!important;
height: 5px;
width: 5px;
top: 0;
left: 0;
position: fixed;
background: red;
border-radius: 50%;
pointer-events: none;
transition: background 0.2s, width 0.2s, height 0.2s, box-shadow 0.2s; }
body #magicPointer.is-hover {
background: #fff; }
body #magicPointer.pointer-blur {
height: 50px;
width: 50px;
background: none;
border: 1px solid #fff;
box-shadow: 0px 0px 15px -5px white; }
body #magicPointer.pointer-overlay {
height: 50px;
width: 50px;
mix-blend-mode: difference;
box-shadow: 0px 0px 15px -5px white; }
body .magic-hover {
transition: all 0.2s; }
body .magic-hover:hover {
cursor: none!important; }
}
Magic Classes For The Snappy Touch
In Wp > Appearance > Menus, make sure you enable the class attribute by clicking on screen options in the top right of the window, and ticking the option “Css Classes“.
Then, open the toggle of any menu item, and in the field labeled “CSS Classes (optional)“, paste the following classes:
magic-hover magic-hover__square
Your turn!
So, I hope you got value out of this tutorial as you will now be able to add a little trendy touch to your website, for that premium feel.
If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the Youtube channel – It does really help, and it doesn’t cost you a thing!.
Oh, if you want to know how to create a beautiful branding for yourself, your business or for your clients, you can download (totally free) my branding guidelines template by clicking here.
So, that’s it for this tutorial, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!
| 
