Cursor invert color (black/white text)

chloe543268

Hi Richard, yes exactly ! But the color inversion must be done only inside the cursor shape (a circle). As in this example : https://centralstudio.ch/

If you can help me to do it (if it's not too complicated) it would be amazing!
Thank you

Richard

Dear @chloe543268

Happy to help.
This was fun to look into, its a nice trick they have done :)

So its actually not a Cursor in the general sense - its an element ( box ) that moves in place of the cursor:

You will need to add the following code into 'Lay -Options - Custom CSS & HTML'

At the top of the page in 'Custom CSS':

.pointer {
    cursor: none;
    background-color: #fff;
    position: fixed;
    text-align: center;
    width: 52px;
    height: 52px;
    z-index: 1000;
    transform: translate(-50%, -50%);
    pointer-events: none;
    mix-blend-mode: difference;
    overflow: hidden;
    border-radius: 50%;
}

NOTE: this 'background-color: #fff;' will be your starting colour so if your webpage has a black background you will see it but with a white background it will blend in. - you can change it to suit your needs

Secondly in the ' Custom <head> content' add the following:

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
    
  jQuery("body").append('<div class="pointer"></div>');
    jQuery("body").on("mousemove", function(e) {
	jQuery(".pointer").css({ top: e.clientY + "px", left: e.clientX + "px" });
	
});

  });
</script>

Remember to save at the bottom of the page and then have a look at your Webpage.

Its a cool effect, hope this helps and have a wonderful day. Let me know how you go! :)

Best
Richard

XLD

This post is deleted!

XLD

Re: Cursor invert color (black/white text)

Dear @Richard-Keith

I love this – thank you so much…

Two things:

(01)
The cursor (element box) blends in perfectly on a white background page. But when I navigate to a black background page, the mix-blend-mode only works after a manual browser refresh.

Can you help?

(02)
The default "arrow cursor" is still visible above the new custom cursor. Any idea why?

Many thanks in advance!

Richard

Hey :) @XLD

Could you post a link to your website? :)

If the question is in regards to when the cursor hits the edge of the browser and reverts back to standard - that is not a Lay Theme issue - this is a browser thing that is out of my hands :(

Best
Richard

evey_k

This post is deleted!

evey_k

This post is deleted!

alberto_califano

@Richard Hello, I wanted to have a cursor with mix blend mode and I was able to do it by using the code written here.

The only problem is that when I go from a page to another it stop to work, and the cursor become invisible.

Does anyone have any ideas on why that happen?

Many thanks,
Alberto

arminunruh

yea this code:

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
    
  jQuery("body").append('<div class="pointer"></div>');
    jQuery("body").on("mousemove", function(e) {
	jQuery(".pointer").css({ top: e.clientY + "px", left: e.clientX + "px" });
});

  });
</script>

its wrong, because it adds a new pointer div everytime you go to a new page ^^

just do it like this instead:

jQuery(document).ready(function(){
    jQuery("body").append('<div class="pointer"></div>');
    jQuery("body").on("mousemove", function(e) {
      jQuery(".pointer").css({ top: e.clientY + "px", left: e.clientX + "px" });
    });
})

alberto_califano

@arminunruh Thank you so much! It works perfectly now.

LenaW

@XLD @Richard thanks for having this function explained, I bump into the same thing of also having the default "arrow cursor" still visible. How did you did you solve this in the end?
Many Thanks!
https://lenawinterink.com/category/test-work-category/

arminunruh

*, a{
cursor: none!important
}

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

maybe this

arminunruh

ur website runs so fast wow even here in brazil. which webhost did you get or which caching plugin do you use?

Lay Theme Forum

Cursor invert color (black/white text)

Before you post:

When you post:

Online Users