Jump to content

Recommended Posts

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! 

Edited by planetmarlowe
Link to comment

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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 years later...
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

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 7 months later...
  • 3 months later...

@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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.