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.