planetmarlowe Posted March 22, 2020 Share Posted March 22, 2020 (edited) 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 March 22, 2020 by planetmarlowe Link to comment
tuanphan Posted March 22, 2020 Share Posted March 22, 2020 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
HunterD Posted March 29, 2022 Share Posted March 29, 2022 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
tuanphan Posted March 31, 2022 Share Posted March 31, 2022 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
ihatesquids Posted November 1, 2022 Share Posted November 1, 2022 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? Link to comment
ihatesquids Posted November 1, 2022 Share Posted November 1, 2022 I found the issue! Ussing 'client x' and 'client y' instead of 'page' fixed it 🙂 tuanphan 1 Link to comment
VPS Posted February 22 Share Posted February 22 @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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment