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

Inverted Cursor Hover Effect


k3ats

Question

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 33
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

Posted Images

Recommended Posts

  • 0
8 hours ago, creedon said:

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

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

Link to post
  • 0
On 11/2/2020 at 10:39 AM, creedon said:

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

@creedon this works perfectly! thank you :)

Link to post
  • 0

Hi,

I have used your code for one of my websites and it works perfectly!   I had used it for another one but for some reason it has disappeared!

If you have any ideas why i'd greatly appreciate it.  

I had your cool cursor working fine on here :  https://colette-smith-3.squarespace.com/ 

pw: hutchsite21

and it’s working fine on another site, https://colettesmith.squarespace.com/ 

pw:lasseflode21


It was working perfectly  on the 1st one until a few hours ago! I have no idea what has happened.

Any help would be greatly appreciated!  I literally haven’t touched the code….  

Link to post
  • 0
On 11/2/2020 at 2:39 AM, creedon said:

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

Hi,

I have used your code for one of my websites and it works perfectly!   I had used it for another one but for some reason it has disappeared!

If you have any ideas why i'd greatly appreciate it.  

I had your cool cursor working fine on here :  https://colette-smith-3.squarespace.com/ pw: hutchsite21

and it’s working fine on another site, https://colettesmith.squarespace.com/ pw:lasseflode21
It was working perfectly  on the 1st one until a few hours ago! I have no idea what has happened.

Any help would be greatly appreciated!  I literally haven’t touched the code….  

Link to post
  • 0
1 hour ago, failbetter said:

I had your cool cursor working fine on here :  https://colette-smith-3.squarespace.com/ pw: hutchsite21

Any help would be greatly appreciated!  I literally haven’t touched the code….  

It's not my code I just got it working for Jprod on SS. 😀

The cursor appears to be working to me on this site.

1242943374_ScreenShot2021-02-02at10_47_36AM.png.016bfc7e5f259842f19482df1b7a0e6f.png

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0
On 2/2/2021 at 6:50 PM, creedon said:

It's not my code I just got it working for Jprod on SS. 😀

The cursor appears to be working to me on this site.

1242943374_ScreenShot2021-02-02at10_47_36AM.png.016bfc7e5f259842f19482df1b7a0e6f.png

Hey - yes but as soon as I add the mix-blend-mode: difference;     it disappears. 

Link to post
  • 0

Hi!

I have tried your code and it works perfectly for me, thank you! Is there anyway I can animate it to achieve something like this? I like how it follows behind you. Also, the little hand still shows up when I hover something interactive, is there anyway to remove it?

https://ascale.es/

Thank you so much! 🙂

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