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.
13 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;
}
Thank you so much for this code, Tina – it’s so useful 🙂
One thing I was wondering is – when I put in the hex code for the background colour of the cursor (for both active and moving around), it actually became a neon blue instead of deep red (one of my brand colours). Would you know why this happens? Thank you!
Did you remove the invert code? Without that removed, it’ll still invert the color it’s hovering over and not perform as expected.
Thank you for posting this! Question, is this slowing down the site speed or is this my imagination?
Hi Gail! Thanks for dropping by my blog and leaving a comment! Super happy you’re interested in my post. 😊
About your question – typically, this cool cursor animation shouldn’t really mess with your site speed. It’s pretty lightweight and runs on your site visitor’s browser, not your server.
But you mentioned your site feeling a bit slow? 🤔 That could possibly be due to loading the external JavaScript files like the jQuery library in the code. But loads of things can impact site speed – think internet connection, browser type, other scripts running on your site, and so on.
Why not try this – remove the cursor animation temporarily and check if your site speed feels better? Just a quick test to see if it’s the culprit.
If you’re still curious, a good way to dig deeper is to use Google PageSpeed Insights. It’s a nifty tool that can give you some insight into what’s causing any slowdown.
This is amazing. I’m finding that everything works properly, but my standard cursor is showing on top. Is there a way to fix that?
Great work!
Add this into your css code:
a:hover{
cursor: none !important;
}
Hi, I don’t see the code injection>footer ?
It’s under website>website tools in your Squarespace dashboard. Advanced settings. If you’re on the personal plan, you won’t have access. You need the business plan.