Jump to content

waynecai

Member
  • Posts

    1
  • Joined

  • Last visited

Reputation Activity

  1. Thanks
    waynecai got a reaction from cat_not_kitty in Custom cursor not moving with scroll   
    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>  
     
     
     
     
  2. Love
    waynecai got a reaction from Drewski in Custom cursor not moving with scroll   
    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>  
     
     
     
     
×
×
  • 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.