Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Inverted Cursor Hover Effect


k3ats

Question

Posted (edited)

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

Edited by k3ats
Link to post
  • Answers 26
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 onl

perfect!! youre the man! i would have never been able to pick all that out. Thank u!!!!

Posted Images

Recommended Posts

  • 0

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.

Link to post
  • 0
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!

Link to post
  • 0

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. 

Screen Shot 2020-07-09 at 12.18.19 PM.png

Link to post
  • 0

@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.

Link to post
  • 0

@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!

Link to post
  • 0

@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!

Link to post
  • 0
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

Link to post
  • 0
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 😁

Edited by inunzi
Link to post
  • 0
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!

Link to post
  • 0
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

Link to post
  • 0
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?

Link to post
  • 0
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 🙂

Link to post
  • 0
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

Link to post
  • 0
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!

Link to post
  • 0
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 

Link to post
  • 0
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!

Link to post
  • 0
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.

Link to post
  • 0
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?

Link to post
  • 0
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 🤷🏻‍♂️

Link to post
  • 0
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 

Link to post
  • 0

@Jprood

I think I have the answer to your issues.

First remove (make a copy) or comment out any code that you added in previous attempts.

Add the following to Design > Custom CSS.

@media ( hover: none ) {

  .cursor {
  
    display: none !important;
    
    }
  }

* {

  cursor: none;
  
  }

.cursor {

  --size: 10px;
  
  height: var( --size );
  width: var( --size );
  
  border-radius: 50%;
  pointer-events: none;
  position: absolute;
  transform: translate( -50%, -50% );
  z-index: 99999999999;
  
  }

.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 0.6s, height 0.6s, background-color 0.6s;
  transition-timing-function: ease-out;
  
  }

.cursor-dot.active {

  --size: 50px;
  
  background-color: #ffffff;
  
  }

Add the following to Settings > Advanced > Code Injection > HEADER. 

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Settings > Advanced > Code Injection > FOOTER. 
 

<script>

  $( ( ) => {
  
    $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' );
  
    $( 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>

You will need to change the colors to match your color scheme.

Let us know how it goes.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...