to use this animated cursor, copy and past this code into the settings>advanced>code injection>footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://static1.squarespace.com/static/ta/5c1b99c7a9e02801f6c9b9d0/4627/scripts/slick.min.js"></script>
<script src="https://ninjakit-assets.ixstudio.net/assets/admin/js/ninja-sqs.js"></script>
<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>
Next you'll want to copy and past this css by going into design>custom css
//For Cursor:
@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; /* Delete this line if you dont want the circle to invert */
transition: width 0.6s, height 0.6s, background-color 0.6s;
transition-timing-function: ease-out;
}
.cursor-dot.active {
--size: 50px;
background-color: #ffffff;
}
html {
scroll-behavior: smooth !important;
}
Introduction
An animated cursor can add a unique and interactive element to your website. The above code creates a cursor that changes size and color when hovering over a link, and disappears when the user is not hovering over any elements.
CSS Explained
First, the code defines the cursor styles using CSS. The .cursor class sets the basic properties of the cursor, including its size, border radius, and positioning. The .cursor.cursor-dot class sets the background color and blend mode of the cursor. The .cursor-dot.active class increases the size of the cursor and changes its background color when the cursor is hovered over a link.
jQuery Explained
Next, the code uses jQuery to track the movement of the cursor and apply the appropriate styles. When the mouse moves, the code updates the position of the cursor element to match the mouse’s coordinates. When the cursor hovers over a link, the active class is added to the cursor element, causing it to change size and color. When the cursor leaves the link, the active class is removed and the cursor returns to its original size and color.
Scroll-Behavior
Finally, the code uses the scroll-behavior property to smooth the scrolling of the page. This can make the user experience more enjoyable and seamless.
Conclusion
Overall, this code allows you to add an interactive and customizable cursor to your website. You can easily adjust the size, color, and behavior of the cursor to suit your desired design and user experience.
follow along in this video!
Get my free squarespace css cheat sheet
Looking for a quick and easy way to up your Squarespace CSS game? Look no further! Our free CSS cheat sheet has got you covered. With this handy reference, you’ll have access to essential CSS properties and values at your fingertips.
5 Responses
Thanks for posting this for free!! 🙂
The code is missing in the first section!
Updated!
Thank you SO much for this!
Hi , great code! How can I make it so the standard hover cursor doesn’t appear when hovering over header elements such as navigation, social icons and button?
Thanks
Add this into your css code:
a:hover{
cursor: none;
}