Custom Cursors?

Hi! I would really like to add a custom cursor to my site.

I'm only on the personal plan so am not able to inject code into the header. Is this the only way to get a custom cursor? I have tried adding various custom cursor codes to the Custom CSS field on the Design page but no luck with what I've tried so far. Also have tried in the HTML editor when adding content to my pages. No dice.

Please help, if you can! 

Use code in this post. https://forum.squarespace.com/topic/70824-override-cursor-with-custom-image/

Don't use cursor image too large, it won't work.

On 3/22/2020 at 3:05 AM, tuanphan said:

Use code in this post. https://forum.squarespace.com/topic/70824-override-cursor-with-custom-image/

Don't use cursor image too large, it won't work.

Hi, I am trying to add the following code to have the exact same custom cursor, but I don't know which code I need to copy and where I need to paste it onto Squarespace. Any help would be appreciated. Thanks!
https://codepen.io/clementGir/pen/RQqvQx

On 3/29/2022 at 7:50 PM, HunterD said:

Hi, I am trying to add the following code to have the exact same custom cursor, but I don't know which code I need to copy and where I need to paste it onto Squarespace. Any help would be appreciated. Thanks!
https://codepen.io/clementGir/pen/RQqvQx

Try adding to Code Injection > Footer

<div class="cursor">
  <div class="cursor__ball cursor__ball--big ">
    <svg height="30" width="30">
      <circle cx="15" cy="15" r="12" stroke-width="0"></circle>
    </svg>
  </div>
  
  <div class="cursor__ball cursor__ball--small">
    <svg height="10" width="10">
      <circle cx="5" cy="5" r="4" stroke-width="0"></circle>
    </svg>
  </div>
</div>
<style>
  body .cursor {
  pointer-events: none;
}
body .cursor__ball {
  position: fixed;
  top: 0;
  left: 0;
  mix-blend-mode: difference;
  z-index: 1000;
}
body .cursor__ball circle {
  fill: #f7f8fa;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script>
  const $bigBall = document.querySelector('.cursor__ball--big');
const $smallBall = document.querySelector('.cursor__ball--small');
const $hoverables = document.querySelectorAll('.hoverable');

// Listeners
document.body.addEventListener('mousemove', onMouseMove);
for (let i = 0; i < $hoverables.length; i++) {if (window.CP.shouldStopExecution(0)) break;
  $hoverables[i].addEventListener('mouseenter', onMouseHover);
  $hoverables[i].addEventListener('mouseleave', onMouseHoverOut);
}

// Move the cursor
window.CP.exitedLoop(0);function onMouseMove(e) {
  TweenMax.to($bigBall, .4, {
    x: e.pageX - 15,
    y: e.pageY - 15 });

  TweenMax.to($smallBall, .1, {
    x: e.pageX - 5,
    y: e.pageY - 7 });

}

// Hover an element
function onMouseHover() {
  TweenMax.to($bigBall, .3, {
    scale: 4 });

}
function onMouseHoverOut() {
  TweenMax.to($bigBall, .3, {
    scale: 1 });

}
</script>

Hi! I used this code answered by @tuanphan (which looks great!) but the cursor disappears when I scroll down the page. Does anyone have a solution for this?

I found the issue! Ussing 'client x' and 'client y' instead of 'page' fixed it 🙂

@tuanphanThank you for posting the solution above! How can I make the ball go big everytime I hover over a link for example? Right now it doesn't react on anything.

If I understand correctly I would have to give the class "hoverable" to every element where the ball should scale from small to big. But is there a way to make it default for all links? So I don't have to give a class to each element manually?

Your help is much appreciated! Let me know if I can buy you a coffee somewhere.

On 3/31/2022 at 5:01 AM, tuanphan said:

Try adding to Code Injection > Footer

<div class="cursor">
  <div class="cursor__ball cursor__ball--big ">
    <svg height="30" width="30">
      <circle cx="15" cy="15" r="12" stroke-width="0"></circle>
    </svg>
  </div>
  
  <div class="cursor__ball cursor__ball--small">
    <svg height="10" width="10">
      <circle cx="5" cy="5" r="4" stroke-width="0"></circle>
    </svg>
  </div>
</div>
<style>
  body .cursor {
  pointer-events: none;
}
body .cursor__ball {
  position: fixed;
  top: 0;
  left: 0;
  mix-blend-mode: difference;
  z-index: 1000;
}
body .cursor__ball circle {
  fill: #f7f8fa;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script>
  const $bigBall = document.querySelector('.cursor__ball--big');
const $smallBall = document.querySelector('.cursor__ball--small');
const $hoverables = document.querySelectorAll('.hoverable');

// Listeners
document.body.addEventListener('mousemove', onMouseMove);
for (let i = 0; i < $hoverables.length; i++) {if (window.CP.shouldStopExecution(0)) break;
  $hoverables[i].addEventListener('mouseenter', onMouseHover);
  $hoverables[i].addEventListener('mouseleave', onMouseHoverOut);
}

// Move the cursor
window.CP.exitedLoop(0);function onMouseMove(e) {
  TweenMax.to($bigBall, .4, {
    x: e.pageX - 15,
    y: e.pageY - 15 });

  TweenMax.to($smallBall, .1, {
    x: e.pageX - 5,
    y: e.pageY - 7 });

}

// Hover an element
function onMouseHover() {
  TweenMax.to($bigBall, .3, {
    scale: 4 });

}
function onMouseHoverOut() {
  TweenMax.to($bigBall, .3, {
    scale: 1 });

}
</script>

 

Hello! Is there anyway to achieve the same custom cursor without using Code Injection? I do not have the upgraded version but would love to have this amazing cursor. Thanks so much in advance!

On 1/11/2024 at 9:49 AM, nitsud said:

Hello! Is there anyway to achieve the same custom cursor without using Code Injection? I do not have the upgraded version but would love to have this amazing cursor. Thanks so much in advance!

 

Try edit your site Footer > Add a Block > Choose Markdown > Then paste the code

@tuanphan

The arrow/hand cursor still remains after I've pasted the code. Is there a way to hide them entirely while using this custom cursor? Thank you

On 3/11/2024 at 1:21 AM, RLongnecker said:

@tuanphan

The arrow/hand cursor still remains after I've pasted the code. Is there a way to hide them entirely while using this custom cursor? Thank you

What is your site url? I can check problem easier

2 hours ago, tuanphan said:

What is your site url? I can check problem easier

I actually figured it out, but my site is www.ryanlongnecker.com,

and I would love to know what options I have to change photo gallery layouts on mobile only keeping desktop as it is...

One more, I would love to know how to include the 'about' and 'contact' in the mobile hamburger menu even though they are not linked pages

On 3/14/2024 at 12:54 PM, RLongnecker said:

I actually figured it out, but my site is www.ryanlongnecker.com,

and I would love to know what options I have to change photo gallery layouts on mobile only keeping desktop as it is...

One more, I would love to know how to include the 'about' and 'contact' in the mobile hamburger menu even though they are not linked pages

#1. You mean homepage? change to 2 items/row or?

#2. You can add it to Main Navigation, then use this code to hide them on Desktop, show on mobile burger only

div.header-nav-item:nth-child(n+4) {
	display: none !important;
}

6 hours ago, tuanphan said:

#1. You mean homepage? change to 2 items/row or?

#2. You can add it to Main Navigation, then use this code to hide them on Desktop, show on mobile burger only

div.header-nav-item:nth-child(n+4) {
	display: none !important;
}

 

Thank you for your response! for #1 what I mean is on desktop my portfolio looks great, but on mobile 2 things are happening. I would like the images to be about 80% what they are right now on mobile, and the navigation buttons are not accessible, they are at the bottom of the screen 

On 3/13/2024 at 8:36 PM, tuanphan said:

What is your site url? I can check problem easier

One issue is that the custom cursor I have disappears when my promotional form pops up when people visit my site for the first time - is there a way to ensure it stays visible?

11 minutes ago, RLongnecker said:

Thank you for your response! for #1 what I mean is on desktop my portfolio looks great, but on mobile 2 things are happening. I would like the images to be about 80% what they are right now on mobile, and the navigation buttons are not accessible, they are at the bottom of the screen 

 

6 hours ago, tuanphan said:

#1. You mean homepage? change to 2 items/row or?

#2. You can add it to Main Navigation, then use this code to hide them on Desktop, show on mobile burger only

div.header-nav-item:nth-child(n+4) {
	display: none !important;
}

 

the ideal would be if in mobile/device view the carousel grid could change to 2:3 horizontal ratio instead.

@tuanphan

Hey there! I am also having a similar problem as listed above...

I attached the code you mentioned in order to get the custom cursor effect. Everything works great EXCEPT that you can still see the hand mouse cursor as well as the new custom cursor.

Do you know any code that could fix this little glitch? I will attach a video of the issue.

Any help is much appreciated!

19 hours ago, ciao_paulina said:

@tuanphan

Hey there! I am also having a similar problem as listed above...

I attached the code you mentioned in order to get the custom cursor effect. Everything works great EXCEPT that you can still see the hand mouse cursor as well as the new custom cursor.

Do you know any code that could fix this little glitch? I will attach a video of the issue.

Any help is much appreciated!

mouse.mov

If you share site url, I can check code easier

@tuanphan

The site is pacificsunelectric.com

Password is: electric

Also, I would really like to put a sound effect when someone hovers over the different pages on the navigation. I saw this effect done on this website: unseen.co

Is there code I can use to achieve this? I have a 1 second .wav audio file that I want to sound off when someone hovers over the navigation links.

Much appreciated!

On 5/26/2024 at 2:11 PM, ciao_paulina said:

@tuanphan

Hey there! I am also having a similar problem as listed above...

I attached the code you mentioned in order to get the custom cursor effect. Everything works great EXCEPT that you can still see the hand mouse cursor as well as the new custom cursor.

Do you know any code that could fix this little glitch? I will attach a video of the issue.

Any help is much appreciated!

mouse.mov

#1. Use this code to Website Tools > Custom CSS

body, body * {
    cursor: none !important;
}

#2. I think you can add an audio block on Footer (we can use CSS code to hide it)

When users hover on each navigation item >> Use JS code to make corresponding audio automatically click, so it will play.

7 hours ago, tuanphan said:

#2. I think you can add an audio block on Footer (we can use CSS code to hide it)

When users hover on each navigation item >> Use JS code to make corresponding audio automatically click, so it will play.

@tuanphan

Any idea what the code for the audio block would be?? Both the JS code to make it play on hover and the CSS code to hide the code??

I've a basic understanding, but everything I've tried has been unsuccessful thus far...

On 5/30/2024 at 2:43 AM, ciao_paulina said:

@tuanphan

Any idea what the code for the audio block would be?? Both the JS code to make it play on hover and the CSS code to hide the code??

I've a basic understanding, but everything I've tried has been unsuccessful thus far...

You can add it first, then we can check easier. Or you can wait some days, I will try test some code on my site then let you know.

If you don’t want to spend hours trying to figure out how to use custom code a solution to add custom mouse cursors to your Squarespace site try this no-code option using SquareKicker. 

With a couple clicks you can change your mouse cursor to an Emoji, Text or Shape. You can even target different mouse cursors for the Whole Site or Specific Page, Section or Block and even change when you hover on a link. 

Check out the video tutorial here:

On 3/22/2020 at 2:05 AM, tuanphan said:

Use code in this post. https://forum.squarespace.com/topic/70824-override-cursor-with-custom-image/

Don't use cursor image too large, it won't work.

I tried this and it does not work at all. My cursor used to flicker using the following code, but with your code there is not even a flicker, just the default cursor. 

body {
  cursor: url(https://static1.squarespace.com/static/64dd43868b01661b82e0063c/t/668c9d1912157d7554d4053e/1720491289840/mouse.png) 15 15, move;
}

 

On 7/9/2024 at 4:56 PM, wartortle1999 said:

I tried this and it does not work at all. My cursor used to flicker using the following code, but with your code there is not even a flicker, just the default cursor. 

body {
  cursor: url(https://static1.squarespace.com/static/64dd43868b01661b82e0063c/t/668c9d1912157d7554d4053e/1720491289840/mouse.png) 15 15, move;
}

 

Icon url doesn't exist. You can upload new one, or send me file, I will give you correct url.