Inverted Cursor Hover Effect

Site URL: https://www.kelseyeaton.com/

Hi!

I'm trying to customize my cursor to be a circle that inverts the content inside it.  Just like this website: https://www.satupelkonen.com/ (except the whole images doesn't need to be inverted on hover, just what's inside the circle).

I found this JSFiddle project that does something similar: https://jsfiddle.net/p1ja0n8r/

But I'm not a developer, and am hoping that someone can explain how to do this like I'm five years old. If it's even possible in SquareSpace?

THANK YOUUUU!

ScreenRecording.mov

That's kind of cool.

Anyway, do you have a business account on squarespace? If you do, we can use that jsfiddle code to get you going.

47 minutes ago, rwp said:

That's kind of cool.

Anyway, do you have a business account on squarespace? If you do, we can use that jsfiddle code to get you going.

Hey thanks for your reply, I just upgraded!

I'm totally not a developer so any extra explanation you think is helpful is much appreciated!

Try using copy and pasting all of this code into the footer code injection area (directions in my signature on how to do that).

https://jsfiddle.net/pelletr1/x6sqo4nc/20/

THIS IS AMAZINGGGG! It totally works! 

For anyone looking to add this you have to add it here on your site (as outlined in rwp's notes):  Settings -> Advanced -> Code Injection

The only thing I changed was the font (see attached screen shot). The new injected code changed my body copy font to "Neutron" and so I changed it back to "Aktiv Grotesk" and tweaked the font weight, line height, etc. in the injected code. 

@k3ats Glad it worked for you. I don't know who originally wrote that code, but with a few small tweaks it looks pretty sharp.

Have a great one.

@rwp This is looking great. I've been trying to figure out this exact cursor, but I only have a personal account, not a business. Do you know of any possible way to achieve/approximate this with just CSS?

I made by own 32x32px black dot cursor, and applied it using:

Quote

body { cursor: url(%mycursor%), default; 
}

And that's as far as I got. Thank you in advance!

I don't think it could be done with just CSS

@rwpI would like to get the same cursor for my website, but unfortunately the jsfiddle you posted is no longer available. I have found an alternate code on another squarespace website, but I can't seem to integrate into my website https://www.lukaseriksen.com/.

The code I found is as follows:

<style>
  @media (hover: none) {
    .cursor {display:none !important;
    }
  }
  * {
    cursor: none;
  }
  .cursor {
    --size: 10px;
    height: var(--size);
    width:  var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: 99999999999;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .cursor.cursor-dot {
    background: #ffffff;  /* This defines the color of the cursor */
    mix-blend-mode: difference;  /* Delete this line if you dont want the circle to invert */
    transition: width .6s, height .6s,
      background-color .6s;
    transition-timing-function: ease-out;
  }
  .cursor-dot.active {
    --size: 50px;
    background-color: #ffffff;
  }
</style>

<script>
  $(window).mousemove(function(e) {     
    $(".cursor").css({
      left: e.pageX,
      top: e.pageY
    })    
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseenter", function() {   
      $('.cursor').addClass("active")   
    })  
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseleave", function() {    
      $('.cursor').removeClass("active")    
    })
  });
</script>

Would appreciate any help you could provide!

On 10/26/2020 at 11:02 PM, LukasEriksen said:

@rwpI would like to get the same cursor for my website, but unfortunately the jsfiddle you posted is no longer available. I have found an alternate code on another squarespace website, but I can't seem to integrate into my website https://www.lukaseriksen.com/.

The code I found is as follows:

<style>
  @media (hover: none) {
    .cursor {display:none !important;
    }
  }
  * {
    cursor: none;
  }
  .cursor {
    --size: 10px;
    height: var(--size);
    width:  var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: 99999999999;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .cursor.cursor-dot {
    background: #ffffff;  /* This defines the color of the cursor */
    mix-blend-mode: difference;  /* Delete this line if you dont want the circle to invert */
    transition: width .6s, height .6s,
      background-color .6s;
    transition-timing-function: ease-out;
  }
  .cursor-dot.active {
    --size: 50px;
    background-color: #ffffff;
  }
</style>

<script>
  $(window).mousemove(function(e) {     
    $(".cursor").css({
      left: e.pageX,
      top: e.pageY
    })    
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseenter", function() {   
      $('.cursor').addClass("active")   
    })  
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseleave", function() {    
      $('.cursor').removeClass("active")    
    })
  });
</script>

Would appreciate any help you could provide!

did u figure this out? where did you paste the codes to get it to work

On 10/26/2020 at 10:02 PM, LukasEriksen said:

@rwpI would like to get the same cursor for my website, but unfortunately the jsfiddle you posted is no longer available. I have found an alternate code on another squarespace website, but I can't seem to integrate into my website https://www.lukaseriksen.com/.

The code I found is as follows:

<style>
  @media (hover: none) {
    .cursor {display:none !important;
    }
  }
  * {
    cursor: none;
  }
  .cursor {
    --size: 10px;
    height: var(--size);
    width:  var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: 99999999999;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .cursor.cursor-dot {
    background: #ffffff;  /* This defines the color of the cursor */
    mix-blend-mode: difference;  /* Delete this line if you dont want the circle to invert */
    transition: width .6s, height .6s,
      background-color .6s;
    transition-timing-function: ease-out;
  }
  .cursor-dot.active {
    --size: 50px;
    background-color: #ffffff;
  }
</style>

<script>
  $(window).mousemove(function(e) {     
    $(".cursor").css({
      left: e.pageX,
      top: e.pageY
    })    
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseenter", function() {   
      $('.cursor').addClass("active")   
    })  
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseleave", function() {    
      $('.cursor').removeClass("active")    
    })
  });
</script>

Would appreciate any help you could provide!

The tag “<script>“ means JavaScript, so maybe paste that code into the header or footer code injection. You can find this by clicking Settings-Advanced-Code injection. Let me know how it goes 😁

2 minutes ago, inunzi said:

The tag “<script>“ means JavaScript, so maybe paste that code into the header or footer code injection. You can find this by clicking Settings-Advanced-Code injection. Let me know how it goes 😁

Also where there more codes to it other than JavaScript? Like HTMlL or Css? Thanks!

On 10/29/2020 at 3:00 PM, inunzi said:

Also where there more codes to it other than JavaScript? Like HTMlL or Css? Thanks!

thats seems to be the code. ive tried injecting all into my footer and also tried just injecting the script and putting the style into my css custome. but all ive done is make the cursor disapear completely

1 hour ago, Jprood said:

thats seems to be the code. ive tried injecting all into my footer and also tried just injecting the script and putting the style into my css custome. but all ive done is make the cursor disapear completely

Hmm, may I see all of the codes, or the full code that you are trying to use. Also so there wasn't any html or css code snippets to go with the java script code?

1 minute ago, inunzi said:

Hmm, may I see all of the codes, or the full code that you are trying to use. Also so there wasn't any html or css code snippets to go with the java script code?

Nevermind the code seemed to work perfectly! I just went on your site, and the cursor was an inverted circle 🙂

58 minutes ago, inunzi said:

Nevermind the code seemed to work perfectly! I just went on your site, and the cursor was an inverted circle 🙂

My site is www.fitaf.co I’m trying to figure out how to implement that above code also. But i can’t seem to get it

5 hours ago, Jprood said:

My site is www.fitaf.co I’m trying to figure out how to implement that above code also. But i can’t seem to get it

Hmm what issues are you having with the code or inserting it into your site? Like do you not know where to insert the code, or is there another issue? Thanks!

4 hours ago, inunzi said:

Hmm what issues are you having with the code or inserting it into your site? Like do you not know where to insert the code, or is there another issue? Thanks!

I’ve tried it completely ion code injection in both header and then footer. And I’ve tried it splitting up the style half in css and the script in code injection. Just seems to make my cursor disappear. I thought since my site is white that changing the color of the cursor to black would work but still no dot cursor. That’s kinda where I’m stuck at 

8 hours ago, Jprood said:

I’ve tried it completely ion code injection in both header and then footer. And I’ve tried it splitting up the style half in css and the script in code injection. Just seems to make my cursor disappear. I thought since my site is white that changing the color of the cursor to black would work but still no dot cursor. That’s kinda where I’m stuck at 

Hmm, let me try the code on my site to see if there’s any problem there!

13 hours ago, inunzi said:

Hmm, let me try the code on my site to see if there’s any problem there!

u are amazing. ive even tried changing color to #000 since the example site is black and mine is white.

7 hours ago, Jprood said:

u are amazing. ive even tried changing color to #000 since the example site is black and mine is white.

I tested the code on my site but nothing changed sadly. May I ask on where you found this code?

1 hour ago, inunzi said:

I tested the code on my site but nothing changed sadly. May I ask on where you found this code?

https://www.lukaseriksen.com And http://www.minimist.ca 

1 hour ago, Jprood said:

https://www.lukaseriksen.com And http://www.minimist.ca 

I was asking on where you found the code. Is it the same code above?

2 hours ago, inunzi said:

I was asking on where you found the code. Is it the same code above?

Yup it was first thing in this thread and then i saw that the first site took it from minimist.ca and got it to work 🤷🏻‍♂️

On 10/26/2020 at 11:02 PM, LukasEriksen said:

@rwpI would like to get the same cursor for my website, but unfortunately the jsfiddle you posted is no longer available. I have found an alternate code on another squarespace website, but I can't seem to integrate into my website https://www.lukaseriksen.com/.

The code I found is as follows:

<style>
  @media (hover: none) {
    .cursor {display:none !important;
    }
  }
  * {
    cursor: none;
  }
  .cursor {
    --size: 10px;
    height: var(--size);
    width:  var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: 99999999999;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .cursor.cursor-dot {
    background: #ffffff;  /* This defines the color of the cursor */
    mix-blend-mode: difference;  /* Delete this line if you dont want the circle to invert */
    transition: width .6s, height .6s,
      background-color .6s;
    transition-timing-function: ease-out;
  }
  .cursor-dot.active {
    --size: 50px;
    background-color: #ffffff;
  }
</style>

<script>
  $(window).mousemove(function(e) {     
    $(".cursor").css({
      left: e.pageX,
      top: e.pageY
    })    
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseenter", function() {   
      $('.cursor').addClass("active")   
    })  
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseleave", function() {    
      $('.cursor').removeClass("active")    
    })
  });
</script>

Would appreciate any help you could provide!

Hi Lukas. You got this to work!! How and where did u put it. Looks so good i wanna do same please