Jump to content

Custom cursor not moving with scroll

Recommended Posts

Site URL: https://lukaseriksen.com

I've implemented a custom cursor into my website (https://lukaseriksen.com) but when scrolling the cursor doesn't seem to move with the screen, it only updates it's position when you move the mouse position again. 

Is there any way to fix this?

Here is the code I used:

<div class="cursor cursor-dot"></div>
<style>
  @media (hover: none) {
    .cursor {display:none !important;
    }
  }
  * {
    cursor: none !important;
  }
  .cursor {
    --size: 30px;
    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 .3s, height .3s,
      background-color .3s;
    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>

 

Link to comment
On 1/14/2021 at 12:21 AM, veronicawastaken said:

Any update here? I've tried to use this code as well but I'm getting an error:

missing opening `{`

Any idea where that should go in the code? @LukasEriksen

 

Screen Shot 2021-01-13 at 12.16.52 PM.png

remove <style> and </style>

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 10 months later...

Modified from @creedon 

 

 

The following code works for me:

Add the following to Design > Custom CSS.

* {
  cursor: none;
  }

.cursor {
  --size: 30px;
  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: #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.3s, height 0.3s, background-color 0.3s;
  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;">' );
    
    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>

 

 

 

 

 

Edited by waynecai
Link to comment
  • 2 years later...

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.