Create a Custom Mouse Cursor In Webflow

hey there welcome on this how-to workflow and today we're going to make a custom cursor so as you can see as I'm moving the mouse we have discussed some cursor moving right and it's actually also changing depending on what it's hovering on and we're going to explore how to do this I also did this on my website made it a simpler version but the steps are exactly the same you can see this little dots moving following the mouse and as I'm hovering all over - howdy you can see this little gift playing I'm going to show you how to do that so the first thing we have to do is first to prepare the the page so I'm going to drag at the block a time Electrical rapper and I'm going to set this width to 100 view width and 100 view height for its height so it's taking a hundred percent of a viewport and I'm going to display it flex and flex next I'm going to drag a heading in the center of it and I'm going to call this how you do and okay now we're ready to make the cursor so to make a cursor all we have to do is to go to the body add a div block inside it and we're going to call this cursor let's set its width to 15 pixels and its height to 15 pixels in the position I'm going to set that to absolute and I'm going to set a colored background let's say I want a full on bright red and a radius of 50 percent so this way I have a little dot that you can see right here red dot so now let's animate it to animate it what we have to do is to go over to the interactions - page trigger and mouse move in viewport create a new animation that's going to call mouse move in viewport pretty simple and now we're going to select the cursor transform move okay add 0 on the x-axis we're going to set that to zero view width and to the hundred percent 200 view with so what it does is as I'm moving horizontally the courser this little red dot is going to follow my mouse horizontally now we have to do the same process for the vertical axis for the y axis I'm going to select cursor on 0 I'm going to move 2 on the y axis 0 view height this time and 100 view at 100% click that done and now I'll check it out and as you can see the cursor is already working if let's say you don't want to see the default Mouse all we have to do is to go to body you go to this panel you scroll all the way down and to the cursor you just select none and now once you move it you see that the basic default Mouse has disappeared so what now if we want to have something similar to this we hover over - howdy we have a gift playing the concept is exactly the same with a few minor tweaks so let's prepare that so let's prepare the gift so I'm going to insert another DEATH but I'm going to place in the body and that's cool that's cursor - gif will set its width to let's say 150 pixels and 105 and what we're going to do is set its position to absolute once again and we'll add an image as a background and I'm going to upload this little how you doing ok so we are almost ready so now it's it's ready right so now we have to set up interactions once again what we're going to do is we're going to go to do how you do it because as I'm moving over to the how you doing I want this gif to start playing and to show up so what I'm going to do is go to click on there and the in demand trigger is going to be mouse over and I'm going to start a new animation and I'm going to call this mouse how you doing over in and I'm going to select the cursor gift sorry to hide and show as its initial state I don't want it to show up so I said to display:none and now I'm going to go to the zero hi and show I want to display it next what I'm going to do is to go to the Hoover out and I'm going to just create a new how you doing over out and I'm going to click on that once again on my cursor and I'm going to set it to hide to hidden now one more step to do before we're done with this is to go to Mouse view in viewport mouse move in viewport and we're going to add this cursor gift to this interaction so all I can do is just click on this one I'm just going to duplicate it and then I'm going to right click again and change target and then I'm gonna click on cursor gif and now it's changed right and the properties are already done access your view with I'm going to do the same right-click here duplicate right-click change target cursor gif and I'm going to do the same here duplicate change target cursor gif duplicate change target cursor give and now if we go check into the interaction panel the red dot is showing up but that's I'm overing it's starting to see but it's flickering as you can see and the issue is has to do with the red dot and also with the image the problem is as I'm overing on to it actually I'm not reopen until the how you doing but I'm overing on to the this how you doing image and also the red dot so I have to fix that so how do you fix this problem you go to click on a cursor gif and actually you have to have offset its distance compared to how the mouse is viewed so to do that you just set it to something different so let's say 16 pixel to the left and 16 pixels there and I'm also going to do that with a cursor cursor doesn't need to be that much maybe going to do five pixels and let's say 10 pixels to a top and now some overing now it's working it's working there is no flickering anymore I'm moving out the gif disappears over and over it works perfectly but now if you want this red dot to disappear as I move over onto the how you do and you can also set this up and all you have to do is to go back to how you do an interaction forum mouse over and you click on it and how you doing over N and all you have to do is to click on the cursor at zero you set the Highland Show to hidden display hidden and you go to the over out you want to show it back yet again once you move over out you're gonna select the cursor hide and show display:inline and now it's going to work it's working perfectly so the red dot is disappearing once I move over into it and appearing and right after it so now actually we need to do something else to make it work like to bread proof it and that's as to do with the Z index because right now this index by Auto means it's essentially zero and the how you doin needs to be positioned like higher if we want to see the if you want to see it every time right because let's show let's see this up if I set the heading to AZ index of let's say relative it's going to be a 10 on the Z index now as I'm going there you can see that the image the gif is playing displaying behind it right so as you start building your page what you want you will start playing with the Z necks and all these things so you want to make sure that your custom cursor is actually showing on top of all the things so what you do is you go to the cursor and you're going to set its Z index to the highest amount possible into the webpage so let's say you're building like all these elements that I go up that maybe go up to 90 in the Z index you want your cursors to go above the Z index so let's set that to 100 and the cursor gif I'm also going to set that to 100 and to make sure I'm gonna check the Z index there okay and now you can see that how you doing gif is working perfectly and it's on top of the text so that's pretty much it for this tutorial pretty simple to implement and if you enjoyed this video please click the thumbs up button and if you would like to see some further web flow tutorials you can click on subscribe and then be sure to make some more video in the future thank you for watching and I'll see you guys soon

Channel: Al Vision

Views: 11,005

Keywords: Design, designer, startups, startup, Freelance, freelancer, freelancing, freelance designer, web design, web designer, web development, web developer, web development tools, freelance web developer, webflow, how to start freelancing, web design business, how to freelance, start freelancing, freelance web design, graphic design, graphic designer, career, web design tutorial, website design, webflow custom cursor, webflow custom mouse

Id: fcf5cBcmLyI

Length: 9min 3sec (543 seconds)

Published: Fri Jun 12 2020