Jump to content

Custom Cursor and Snap Scroll Buggy

Recommended Posts

Site URL: https://tangerine-flamingo-d2gk.squarespace.com/

site: https://tangerine-flamingo-d2gk.squarespace.com/
pw: wax

Hey all!

I'm using this bit of jquery for a custom cursor and on it's own it works great

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

but I believe the function that gets the cursor position is interfering with the CSS Snap Scroll

//snap scroll homepage
#collection-62d56566e4713f4e4c93ab33  .page-section {
  scroll-snap-align: start;
}

that I'm using on the site as well. When you move the mouse while the viewport is moving everything jumps around and gets jittery. I'm not sure if there's a better way to get the mouse position or if I'm totally off base but any help would be appreciated.

Thanks!

Link to comment
  • Replies 1
  • Views 179
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.