NajiyyaYounas 0 Share Posted January 17 Site URL: https://codepen.io/clementGir/pen/RQqvQx Hey there, I am struggling to add a cursor like the link above on my Squarespace site. Can you please help? THANKS Link to post
0 tuanphan 9,305 Share Posted January 20 Try adding this to Home > Settings > Advanced > Code Injection > Header <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> You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
Question
NajiyyaYounas 0
Site URL: https://codepen.io/clementGir/pen/RQqvQx
Hey there,
I am struggling to add a cursor like the link above on my Squarespace site. Can you please help?
THANKS
Link to post
Top Posters For This Question
2
1
Popular Days
Jan 17
1
Jan 20
1
Jan 21
1
Top Posters For This Question
NajiyyaYounas 2 posts
tuanphan 1 post
Popular Days
Jan 17 2021
1 post
Jan 20 2021
1 post
Jan 21 2021
1 post
2 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment