Create a Custom Mouse Cursor In Webflow
HTML-код
- Опубликовано: 11 июн 2020
- Hey Webflowers! In this Webflow tutorial, we're making a custom mouse cursor without code. You can create this to have custom cursors on specific elements and/or on the whole website.
You can clone the project directly in your Webflow account and follow along:
webflow.com/website/Custom-Mo...
To make this work, pay attention to the tutorial because I show you some "advanced" tip inside Webflow that will ensure that your cursor will work 100% of the time.
----
If you'd like to see more Webflow content, you can subscribe to the channel: ruclips.net/user/AlVision?su...
--
Want to get in touch?
→ hi@al.vision
--
Start using Webflow today: webflow.grsm.io/3424789
(this is an affiliate link, if you end up getting a subscription I'd get a tiny incentive at no extra cost to you) 
Хобби
![Change Background Color on Scroll [Webflow Tutorial]](/img/1.gif)
UPDATE: I made a mistake in the tutorial. For the cursor to work properly, change the cursor's position from Absolute to Fixed. Once you make this change, it will work as expected.The rest of the tutorial stays the same.
And also cursor_gif to "fixed" as well
great tute but the link to clone the page doesnt go anywhere?
Man I was looking for this all over the net with no success, thanks a lot!!
keeep up the good work man i was looking for this all over the internet😂thank you
Albert, great video on the custom cursor and the hover interaction.. Been looking for this since last few days... Thanks a lot!
Glad it was helpful to you!
DUDE!
Merci Beaucoup! The simplest, solution x2 I have found yet!
Only came across your channel yesterday and this is gold.. exactly what Im trying to do right now..
Cheers from Ireland ☘️
Cheers mate 🙏
Awesome stuff man
would like to see more tutorials from you! so great
Awesome video great work😊
OMG THANK YOU!
Awesome video thanks! Any idea of how to accomplish this when you have more than one element in a section that would have different images for each item hover?
THANK YOU! I was trying to find a tutorial about when you hover a text, shows a picture, but couldn't find one until now. Please do more tutorials on webflow
i was trying to do the gif appear after hovering on a span text.. and it keeps flickering... im not trying to add the custom cursor i just want the gif effect. it is working but it flickers when i hover over the gif.. is there any solution
hey, thanks for the great tutorial!
i got one question left:
it's all working fine, but now everytime i'm in the designer my website the gif is playing in the top left corner of the screen.
thats a bit confusing, since i also have other elements on my site. anyway to turn that off?
thanks!
Very good tutorial, but I wanted to know how to make it inside a grid columns, that have text inside, and on that text, I wanted to do the hover effect.
Because the heading stays all the time in the middle of the site.
Greate tutorial! I have a question. I just want the little dot as a cursor, but when I hover over links, i have the dot plus the hander pointer overlapped. I want to hide the hand pointer.
I need to build a magnetic custom cursor snapping to a specific element, and when it hovers over this element the image moves over the hero title with a blend mode effect. Where can i contact you?
Quick question, ive double checked everything but cant seem to figure this out, but using this custom cursor I cant click on links or buttons, any suggestions?
Hello Mate, I'm facing a problem.. this custom mouse is only working on the hero area but it is not moving below it. can you please give me any solution?
does the gif only work for the single element?
I'm high AF and this looks like Shia LaBeouf giving a Webflow tutorial.
Cant click anything because the circle is in the way. I don't want to off set the circle to make it work. Want it to be in the middle of the mouse... Bad "fix".
i have a custom cursor that i only want to be active when on desktop view. i hid it on tablet view but when im on my 12.9 ipad pro, it still shows the cursor even when i hid it. it's hidden on my smaller older gen ipad though. Is this a bug (maybe webflow hasn't updated their breakpoints for larger ipad?). any way to work around this?
Webflow doesn’t create breakpoints based on devices but rather in screen sizes. Hiding your animation based on actual devices would require custom code.
But I’m not sure how to achieve it
Great video! Do you know if the hovering the text with cursor will work if you put video paying instead of gif? Or do you have any alternative solutions for that?
To have a video as a cursor would most likely require custom code. I haven't encountered such use case like this yet.
Flipping it the other way around, you could have a video playing when hovering in.
@@AlVision what if I would like a video to appear on the same of the button once I click the link? Do you have a solution for this?
is there anyway that, when you hover over any links or buttons, that you can make it so that the finger does not show. I did exactly what you said in the first part of the video and I LOVE IT but when I hover over things like dropdowns, it has the pointed finger when all I want is the curse that I created.
I don't know if there's anoth way but I did set manually the cursor to none to all of those elements.
I tried this on a page I already had and it moves away like crazy when I place the mouse on the bottom of the page. Do you have any solutions? Thanks.
You can send a read only link to hi@al.vision and I’ll take a look
@@AlVision I fixed it changing the VX values a little bit and it works perfectly, but now I created another page and the cursor moves behind some images. I'll sent you the link.
Most likely, to fix this problem, set the Z-index of your cursor at a higher number than your images ( or any other element for that matter).
I.e. if your image has a z-index of 99, set the z-index of your cursor to 100 and it should appear on top.
@@orjval How did you solve it exactly with the XY values?
great tutorial, I wonder how you do the cursor on a page thats scrolls. It seems to only work on a page with a 100vh element...
same question here
It should work for any page length. The interaction is setup to move the mouse without affecting any other element of the page.
@@AlVision Hey, thanks for responding. Unfortunatly it doestn work at any length because of the scrollbar on the right on windows computers. This cause our cursor to appear a little bit of. Any solutions or ideas?
@@hendrikbrueggemann680 Same here! Great video, nevertheless!
@@LicMarceloBrum i hhave the same issue
hi! I wonder if it possible to add a slo-mo effect to the mouse, for example, the cursor looks like a dot with a circle around it and I want circle following dot with delate
I am facing a problem! In my case the gif is showing at so much distance when I hover, like in your case gif appears just under the cursor but in my case the gif is showing like 400px above from the cursor
Could be due to two things: either the interaction metrics are not set up correctly or the cursor is not properly set up.
If you want you can share a read-only link to hi@al.vision and I’ll take a look
@@AlVision thanks for you reply! But I actually solved it 😄
Hey @Ujjwal Sharma I have the same problem. How did you solve it?
@@ShaonCala make the gif/image fixed to the body and you're good to go.
@@Ujwl666 i had the images wrapped in a parent container. that was the problem! now its working fine! thank you!!