Hey Webflow community!
I’m trying to implement a custom cursor I found on codepen: https://codepen.io/visceral/pen/qBVoZgo
While it does work, I noticed that it’s contained to a small section above all my content.
I’ve put the html in the tag and js in the and included the right sources
I’ve made a test site if it helps:
Here is the live preview so you can test the codepen at the top:
Not sure what I’m doing wrong here, or if this simply isn’t supposed to work as a real cursor. If anyone has suggestions to a similar cursor I can implement or a workaround, it would be greatly appreciated. New to Webflow haha.
hello @newton, so I made it work on the browser, all I did was change the HTML/ CSS a little bit. where you have the head code add styles tag and add the following
and on the svg tag instead of 100% for the height change it to 100vh. I hope this helps!
Thanks for the reply Pablo! I added the extra code and it fixed the issue - but now I have another.
The cursor seems to diverge as I scroll down the page, almost as if it doesn’t take the “position: fixed” tried with position: absolute as well - same issue.
Here’s the code:
Updated the test site so you can see with scrolling down : https://test-svg-cursor.webflow.io/
Many thanks again!
Hey @newton, I see whats going on, try this, place a div on your body, make it position fixed, inside that div, place and embed component, give that embed a height of 100%, inside the embed copy and paste the whole html text from your head page settings, change the style of the svg to absolute instead of fixed. I hope this helps.
Interestingly, while it fixed the strange displacement of the svg, the effect seems to disappear once you enter below the fold – almost as if completely ignoring the “fixed” positioning. I gave the div a color to test if it was actually fixed to the browser, and it is, and I even tried changing the embed to absolute, fixed, sticky, etc - no luck.
Oh i see @newton, another thing you could try is to give your body a height of 100%, like on the original codepen. I hope this helps.
Unfortunately that didn’t work either.
Anyway, thanks for all the help! I’ll revisit this when I get the rest of my portfolio done
You are welcome @newton , sorry I couldn’t make it work, it is hard to test custom code without publishing. There are multiple options for cursors though, I think the one you found is specific for one page sites/landing page menus. Any way, good luck with your project, please share the final site when you are done!