TL Web Design Studio

How To Add An Animated Cursor To Your Squarespace Site

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. 

Share this article :
Facebook
Twitter
LinkedIn

13 Responses

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

  2. 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!

    1. Did you remove the invert code? Without that removed, it’ll still invert the color it’s hovering over and not perform as expected.

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

  3. 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!

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

Leave a Reply

Your email address will not be published. Required fields are marked *

WRITTEN BY
custom web design
Tina Henson
FOLLOW ON
Schedule a free consultation

Unlock the Secrets of SEO with Our Comprehensive Guide!

This guide is your key to unlocking the mystery of finding the right keywords, implementing them correctly, and creating content that consistently ranks on Google. Say goodbye to the stress of grappling with ever-changing IG algorithms!

This is the exact method I used to grow my own website traffic 240% in just 6 months. Get ready to see your traffic grow!