Jump to content

If I move the mouse outside the web the custom cursor stays fixed on top

Recommended Posts

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

I want to make that when I take the cursor out of my website, the normal cursor is put on, not my custom one. And that the transition between custom mouse and normal mouse is fluid, that it does not remain fixed at the top

This is the code:

CSS

// CUSTOM CURSOR // 
* {
  cursor: none;
  }

.cursor {
  --size: 20px;
  height: var( --size );
  width: var( --size );
  border-radius: 50%;
  pointer-events: none;
  position: fixed;
  transform: translate( -50%, -50% );
  z-index: 99999999999;
  
  }

.cursor.cursor-dot {
  background: #016cff; /* This defines the color of the cursor */
  transition: width 0.2s, height 0.2s, background-color 0.2s;
  transition-timing-function: ease-out;
  }

.cursor-dot.active {
  --size: 48px; 
  background-color: #aaaaaa;
  opacity: 0.5;
  }

CODE INJECTION:

<script>
  $( ( ) => {
    
   $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' );
    
    var cursor = $(".cursor");
    
    $( window ).mousemove ( function ( e ) {
      cursor.css ( {  
               top: e.clientY,
            left: e.clientX 
        } );   
      } );
    

    $( window ).mousemove ( function ( e ) {
      $( 'a' ).on ( 'mouseenter', function ( ) { 
        cursor.addClass ( 'active' );
        } );
      } ); 
    
    $( window ).mousemove ( function ( e ) {
      $( 'a' ).on ( 'mouseleave', function ( ) {
        cursor.removeClass ( 'active' );
        } );
      } );
    } );
    
  </script>

Like this websitehttps://www.estevedurba.com/

Pls help me.

Thanks! ❤️

 

image.thumb.png.b66e8c0ef6aaa1122b8746d4743a44c5.png

Edited by loisartz
Link to comment
  • 2 months later...
  • Replies 1
  • Views 243
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.