HunterD Posted March 29, 2022 Share Posted March 29, 2022 (edited) 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 onto Squarespace. Any help would be appreciated. And no, it doesn't work on code blocks.Thanks! https://codepen.io/clementGir/pen/RQqvQx Edited March 29, 2022 by HunterD Link to comment
tuanphan Posted March 31, 2022 Share Posted March 31, 2022 Try adding to Settings > Advanced > 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> Web_Solutions and MattDerrickAH 1 1 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
MattDerrickAH Posted October 15 Share Posted October 15 Hi @tuanphan Thank you so much for providing the workaround code. It almost works perfectly! But on my website (www.ah.studio), it doesn't expand in size when I hover over a link. I would be incredibly grateful if you had any ideas about how I can get this to work? Thank you very much in advance. Best wishes, Matt Link to comment
tuanphan Posted October 16 Share Posted October 16 15 hours ago, MattDerrickAH said: Hi @tuanphan Thank you so much for providing the workaround code. It almost works perfectly! But on my website (www.ah.studio), it doesn't expand in size when I hover over a link. I would be incredibly grateful if you had any ideas about how I can get this to work? Thank you very much in advance. Best wishes, Matt Change this line const $hoverables = document.querySelectorAll('.hoverable'); to this const $hoverables = document.querySelectorAll('a'); Web_Solutions and MattDerrickAH 1 1 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
MattDerrickAH Posted October 16 Share Posted October 16 You are the don @tuanphan. Thank you as always for your rapid answer, I'm forever grateful! 🙏 tuanphan 1 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