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.