TB Web Design

Squarespace, Web Design Tips, Web Development

How To Add An Animated Cursor To Your Squarespace Site

Posted on
by

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

  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

Leave a Reply

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

WEBSITE WIZARDRY:
GET YOUR FREE MAGICAL WORKBOOK

FOR WEBSITE CLARITY IN 30 MINUTES!

This workbook is perfect for anyone who wants to gain clarity on their website goals AND make informed decisions during the website design process. Whether you’re a seasoned website wizard or just starting to dip your toes in the waters of website design, this free workbook will guide you through the process with ease. And the best part? You can achieve this magical clarity in just 30 minutes!

Hey Friend!

I'm Tina

I love creating digital products that create value and save time. After working in the health and beauty industry for over 10 years and realizing my career and personal growth was at a standstill, I decided to pursue my passion in Web Development and Design.

I traded in those early mornings, late nights, and sometimes hours spent in rush hour traffic for work/life balance, endless opportunities for growth, and more time spent at home watching my family grow. That’s exactly why I’m here creating to help you pursue your passions and achieve time freedom with the services and products I offer.

I hope that you found your way here because you value expert insight, love creative thinking, strategic design, and want results.

Ready to level up your business? Let’s connect and explore if we’re the perfect match to achieve your goals.

branding and web design for female entrepreneurs
tb wordpress and squarespace web design for female entrepreneurs near me (4) (1)