Custom Cursor Inverted Effect – Elementor Pro

custom cursor elementor pro INVERTED EFFECT

Custom Cursor Inverted Effect – Elementor Pro

Elementor Pro animated text with horizontal scrolling

DISCLAIMER: I often review / link to products & services that I love and think you may find of interest. When you purchase a product/service through one of my link, I receive a commission, which helps me producing free content (you don’t pay anything extra!).

hello, I’m Kaycinho, The Digital Alchemist, and today, I’m going to show you how to implement a gorgeous inverted color effect custom mouse pointer with Elementor Pro. WITHOUT any additional plugin.

Let’s give credit where it’s due: this tutorial is based on a  Stack Overflow answer from Kaiido.
 

 

Custom Cursor Inverted Effect Elementor Pro

This tutorial is video based of course, but in case you need some time stamps :

  • 0:34 – What we’re going to build
  • 2:28 – Pre-requisites
  • 3:37 – Credits
  • 4:13 – Preparing Image Assets
  • 11:28 – Creating The Content
  • 18:14 – HTML and JS Code
  • 19:11 – Adding the CSS Code
  • 20:30 – Options
  • 21:28 – Full Screen Menu

JS Code

In Wp > Elementor > Custom Code  -> add a new Custom Code and paste the following code:

				
					<div id="cursorz"></div>
<script type="text/javascript">
const cursorz = document.getElementById("cursorz");
const moveCursor = event => {
  const cursorWidth = cursorz.offsetWidth / 2;
  cursorz.style.left = event.pageX - cursorWidth + "px";
  cursorz.style.top = event.pageY - cursorWidth + "px";
};
document.addEventListener("mousemove", moveCursor);
</script>
				
			

Main CSS code (global settings level)

While editing your page with Elementor Pro, click on the hamburger icon (top left corner of the editor page), then Site Settings > Custom Css and paste the following code:

				
					@media only screen and (min-width: 1367px) {
    body {cursor:none;}
    #cursorz {
    z-index:1000000;
    pointer-events: none;
    width: 5rem;
    height: 5rem;
    will-change: transform;
    background: #f1f1f1;
    position: absolute;
    mix-blend-mode: difference;
    border-radius: 50%;
    
    animation: grow-shrink 4s infinite alternate;
    }
    
    @keyframes grow-shrink {
      0% {
        transform: scale(1.0);
      }
      25% {
        transform: scale(0.9);
      }
      50% {
        transform: scale(1.0);
      }
      75% {
        transform: scale(0.9);
      }
      100% {
        transform: scale(1);
      }
    }
}
				
			

 

 

Your turn!

custom cursor elementor pro INVERTED EFFECT

Your turn!

I hope this tutorial will help you spice up your next website project with Elementor Pro!

If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the Youtube channelIt does really help, and it doesn’t cost you anything!

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!

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email
>
Privacy Settings saved!
Privacy Settings

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. Control your personal Cookie Services here.

Cookies essentials to the navigation on this website.

Cookies used to remember your choices regarding privacy.

Decline all Services
Accept all Services

Join me on YouTube

subscribe & get exclusive tips to be your own boss

Brand, market

& grow online

​By subscribing you accept to receive my newsletter and occasional marketing offers. Unsubscribe anytime.

close
Scroll to Top

My Account

Featured

Check out the shop!

Subscribe to my newsletter