Elementor Pro animated text with horizontal scrolling
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!
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 channel – It 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!
| 
