TB Web Design

Now Booking Winter 2022-2023! Now Booking Winter 2022-2023! Now Booking Winter 2022-2023!
Now Booking Winter 2022-2023! Now Booking Winter 2022-2023! Now Booking Winter 2022-2023!
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. 

3 Responses

Leave a Reply

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

Get my free website workbook

Before we dive into building and optimizing your business website, let’s take a moment to identify your goals. Recognizing how you want your website to function and what you’d like to get out of your website will help you make important decisions later on. Additionally, it’s a great place to refer back to as you continue to progress.

Want to Make More Impact?

It's time to upgrade your website.

It isn’t just about being seen. It’s about using every part of your website (your content, calls-to-action, etc.) to bring your ideal clients to a place of WANTING to do business with you.

Are you ready to talk about how we can make that happen?