How To Add A Fancy Custom Cursor In WordPress With Oxygen

[@isaurasotoca]

How can we change the size (or color, or border-width...) of the custom-cursor when hovering any link? Thanks for the tutorial, Elijah!

[@StriteMVP]

Also wondering this.

[@robertodepasamonte3434]

Very well presented and helpful tutorial. Thank you. One question. How could one make the custom cursor "appear only" on certain sections or blocks of the page (e.g., an image gallery or a CTA) but then have the standard cursor appear everywhere else?

[@IrenHawx]

I imagine if you put the cursor div inside the section it would work that way.

[@kengmick]

please add the code to this video's description so it's easily available, thanks!

[@Ronaldinho2907]

Hey guys, thank you. But what about putting here those CSS or JAVA, pls..

[@Pixels_and_Points]

Are fancy cursors accessiblity-friendly?

[@nicholaslynndrake]

Is there a way to make this appear only over a certain div?

[@StriteMVP]

Thanks for the vid! Any suggestions on hiding the cursor on mobile devices?

[@krisztianbalog3847]

media query could get the job done. Or not, I haven't really thought it through. Since it won't turn off JS, but I would start from there

[@dahunsi]

Thanks a lot for this Elijah. Do I have to do this per page or will it work on the entire site?

[@oxyextras4289]

Add it to your catch-all main template and it appear on every page that inherits that template.

[@tbarscott]

I gave this a try by copy and pasting the code provided further down, it displays the cursor image I want but all the hover styles on my page don't work. It appears like the cursor is visible but not actually functional.

[@putudharma4352]

Nice one, just wondering about that and your video popup 😁

[@cokidevssiregar2474]

It's GOing Biggerrr :v
Thats Why I love oxy :D

[@0oeddmano0]

Flame on the cursor thats so 90ies

[@charlz487]

window.addEventListener('mousemove', (e) => {

if( window.angular ) { return; };

var mouseX = e.pageX - 24;
var mouseY = e.pageY - 24;
var cursor = document.querySelector('.custom-cursor');

setTimeout( function () {
cursor.style.cssText = "transform: translate3D( " + mouseX + "px, " + mouseY + "px, 0)";
}, 0);

});

[@agenzagmbh]

I tried this but as I didn't want to have my custom cursor on the whole page, but only in one sector, I used this code:
var boxes = document.querySelectorAll(".custom-cursor-container");
boxes.forEach((box, index) => {
let cursor = box.querySelector(".custom-cursor");
document.addEventListener("mousemove", function (e) {
const { left, right, top, bottom } = box.getBoundingClientRect();
var x = e.clientX;
var y = e.clientY;
cursor.style.left = x - left + "px";
cursor.style.top = y - top + "px";
const show = x > left && x < right && y > top && y < bottom;
cursor.style.transform = `translate(-50%, -50%) scale(${
show ? 1 : 0
})`;
});
});
---
.custom-cursor-container is the class of the sector in which the effect should appear, .custom-cursor is the class of the cursor div. Other settings according to the video. It worked just fine on my site :)

[@nicholaslynndrake]

did you add this into the code he presented, or just fully replace with the above? I'm trying to do the same thing.

[@agenzagmbh]

@@nicholaslynndrake I fully replaced the code. Good Luck!