davidjsbrown

Site URL: https://www.davidjackspencer.co/

I have successfully created a custom cursor using the code below, but cannot figure out how to add a delay to the cursor movement like this example here: https://codepen.io/ciprian/pen/BazvjRZ

I've posted this in Settings > Advanced > Header 

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

And this in Settings > Advanced > 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>

After doing that I've also pasted this in 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; /* This line is for the circle to invert Delete this line if you dont want the circle to invert */
  transition: width 0.8s, height 0.7s, background-color 0.9s;
  transition-timing-function: ease-out;
  
  }

.cursor-dot.active {

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

Any help would be greatly appreciated!