Need help integrating custom cursor from Codepen

Design help Custom code
#1

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.

cursor-cut
cursor-cut2267×690 51.3 KB

I’ve put the html in the tag and js in the and included the right sources

image
image1248×1572 189 KB

I’ve made a test site if it helps:
https://preview.webflow.com/preview/test-svg-cursor?utm_medium=preview_link&utm_source=dashboard&utm_content=test-svg-cursor&preview=d342d6acca17dad7859116eda66f7f57&workflow=preview

Here is the live preview so you can test the codepen at the top:
https://test-svg-cursor.webflow.io/

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.

Thanks!

#2

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
Screen Shot 2022-03-26 at 2.21.51 PM
and on the svg tag instead of 100% for the height change it to 100vh. I hope this helps!

#3

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:
image

Updated the test site so you can see with scrolling down : https://test-svg-cursor.webflow.io/

Many thanks again!

#4

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.

#5

Hey @Pablo_Cortes

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.

#6

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.

#7

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 :sweat_smile:

1 Like
#8

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!

1 Like