Create Custom Mouse Cursors in Webflow | Webflow Tutorial

in the next few minutes you're going to learn how to create a completely custom cursor just like the one you see in my screen using webflow so let's get started [Music] hello again my name is noah bateman welcome back to the channel uh today as i already mentioned we're going to be creating a completely custom cursor using webflow i know this is my first tutorial on workflow so i hope you guys like it and i should be posting a few more like this in the coming future this tutorial is going to go into quite some detail about the creation of curses uh this curse that you see on my screen is a little bit complicated but it's not too difficult and everything that you learn in this tutorial you'll be able to transfer into your own curses this will basically allow you to create whatever cursor that comes to your imagination if you're completely new to the channel hello and welcome uh my name is noah bateman as i've already mentioned and please go down below and hit the subscribe button i'm trying to reach 100 subscribers and you can help me out with that but i've said too much already let's just get into it so you can see in my screen this is the cursor that we're going to be creating uh this cursor consists of two parts it's the outside circle and the three dots in the middle uh you can simplify this even greater by just creating one simple dot that changes and then when it goes over anything in the website it changes and it interacts with things on the website so i'm going to be showing you how to do this there's a little bit of code involved but it's nothing too complicated it's literally just a case of you copy and paste and uh just do exactly what i tell you to do and you'll be fine so yeah firstly what i'm going to do is i'm just going to delete everything and we'll start from scratch the first thing i want to say about this tutorial is that this is not a webflow tutorial this is a tutorial within the webflow so i'm not going to be taking you through how to work workflow i'm just assuming that you already know how to do this as you can go and watch another tutorial first and then come back to this one if you need to do that so what i've done is i have just created a very very simple website it is literally just an overall box with a heading in the inside saying welcome the font i like to use is roboto it's a very nice font it's nice and clean for websites uh maybe not the best for every single type of website but it works nicely if you're looking for a good font to use and what we're going to do is we're going to set up our cursor so you can see in the preview it's just like this and it's nothing too complicated the cursor when it goes over the welcome changes to this cursor uh so yeah it's nothing too complicated if you're familiar with webflow you'll know that if you come to the body and come down you'll see that you can change your cursor and you can change it to be anything like this however this is very limited and it's not custom as we're trying to create so what we're going to do is uh we're basically going to make this cursor invisible by using the none and then we're going to create a div block that will follow the path of our cursor so to do this we're going to click here and drag in a div block and we're just going to put it above everything you might have a header for example uh put it above the header you might have anything on the page might have buttons you might have images just put it above and this is how you get started you create a new class and you can call this class uh whatever you want i'm gonna call it cursor grid so once i've called it that what i'm going to do is i'm going to set it to flexbox i'm going to keep direction horizontal align to center justify to center and we're then going to come down to its position change from static to fixed this means it just stays at the front of the page no matter where you scroll i'm going to set that to fill so it's everywhere this is basically just meaning that everything's going to be in the middle of the page then nice and simply you come to the plus and create a new div block and just drag that inside of here you can see it will spawn in the bus why does it spawn it'll just appear in the middle of the page and then you can give this whatever class you want this is how you're going to design the cursor so this is where um you create the cursor however you want to in my case i'm going to almost have two cursors i'm going to have the outside circle and then the three dots in the middle but yours might just be a simple we point or it might be a png for example so i'm going to give this a class of large circle i'm going to set the width of this to 50 i'm going to set the height of it to 50 and then i'm going to come down i'm going to change its position to absolute this means that it's always going to be there and then i am going to come down and i'm going to change the radius to 25 to make it a complete circle because the radius 25 the whole width is 50. the style of the border i'm just going to leave it as it is but i'm going to change the width to 1. this is going to create that circle so if you come to the preview you can see the circles just there in the welcome so it's nothing too complicated at this point and it's not following it at all but that's not to worry we're then going to come up again and create another div block and i'm going to make this being the three dots so this one's going to be a little bit more complicated this is going to be three dot contain there we go and inside of this i'm going to make this uh not a grid a flex box keep it to horizontal and align everything to the center and i'm going to use this little tool this is basically going to ensure that everything that is inside of here i.e for us the three dots are going to be equally spaced if these are the two um outer edges i'm going to make this smaller than the outside circle so i'll make it 30 by 30 and then the position again i'm going to set this to absolute and then the uh it's not going to have a border radius or anything like that so that's fine then inside of here i'm going to start to create our little dots so the first one i'm going to call a small dot this is obviously going to be our small dots width i'll set it as four title set as four and then our radius i will set this as two and then the color of this i'm going to set this to black then what we can basically do here is we can take this and go control copy ctrl paste so we have another one and then finally we're going to create another div inside of here put it in the middle there we go and we're going to call this large dot this is uh going to be exactly the same however the width i'm just going to make it bigger and the height i'm going to make it bigger i've selected 10 for this case the radius i'm going to make five and then the color i am going to make black as well so we can see that now if we come here we have everything created but we have this cursor going around the page so we want these dots to start to follow the cursor this is very easy to do and to do this what we're going to do is we're going to come to interactions we're going to select we'll start with the large circle first and we're going to select page trigger mouse move in viewport select an action play mouse animation i'm just going to delete these two because i've already had them made previously but what we're going to do in this animation is click the plus we're going to call this large circle movement and then what we're going to then do here is click on the plus for mousex actions and click move you can see that these two things appear and it's got 0 and 100 this refers to at the zero percent of the x-axis and the 100 of the x-axis doesn't really make much sense however the zero percent refers to the very left of the page and the 100 refers to the very right of the page so we need to say that when it's at the zero percent where is the circle and when the curse is at 100 where is the circle so we don't want this to affect just this element we want to affect the class because then uh it will affect this class in every single page that we create because we're going to have a cursor in every single page so when we come to the zero percent where do we want the large circle well we want at the very very left of the page we can define this by pixels however depending on different screen sizes will depend on the different pixels so what you want to do is say negative 50 view width this is basically going to put this to the very very left hand side and then what you want to do is you want to click on the 100 and then you want to make sure that this is 50 view width so if we then click on live preview you can see that this is going to follow our cursor in the x direction but it's not following in the y and you can see that the y is adjusting but we haven't set any times for this so that's not what we're going to do so we're going to click on the plus and we're going to click move and you can see this appears make sure this is selected to class and then change this and the y to be negative 50 but this time if you height instead of u width so vh you can see that's then set and then 100 making sure this is again class make sure this is then 50 view height and then if we click on live preview we can see that it starts to follow it now you'll notice that if i go like this the circle is delayed a little bit it's not keeping up with the cursor 100 and this is called smoothing you can adjust this however you like and you can have it incredibly close to the cursor or you could have incredibly delayed in my case i want this circle a little bit more delayed so i'm going to click on the save i'm going to come down to the smoothing and adjust this value i'm going to make this 90 to make it more delayed and then if you come to the preview you can see that this circle is now delayed but it is following the cursor how we like the smoothing i'm going to make smaller for the three dots so it stays closer so now what you want to do is you want to click on three dot container and then add a new page trigger because the smoothing is going to be different mouse move in viewport select an action play mouse animation and then we're going to click on the plus for a new animation and this is going to be a 3 dot movement and then you want to set the x and y like we've previously done with the large circle so it's exactly the same we go to move make sure this is selected as the class for the three dot then x negative 50 view width and then in the 100 make sure this is 50 view width and then in the y move we're going to make the y negative 50 view width oh no sorry negative 50 make sure this is negative 50 view height not v width because we're now in the height and then making sure selected elements is class make sure this is then 50 view height so then hopefully when we go to live preview this starts to follow like we expect it to which is great we can click save and we can adjust the smoothing however we like i'm going to make it a little bit more 60 and then hopefully this now works so you can see the curse is now following hour one like we expected to and we can start to select the welcome and we can interact with the welcome as expected uh but we still have this arrow cursor we might want to get rid of it and as i've previously said the way that we do this is becomes the body and we come down to the very very very bottom we go to cursor and we basically set this to none and now this means when it comes to the preview we have our cursor which is great so some of you might have noticed this but if you've got the page here so we've got all the buttons we've got everything down here and then we've got this div block and then we've got the cursor above it the cursor is always going to have a div block below it the four buttons above the buttons so this means that if we try to click on buttons it's not going to work because we're always going to be clicking on this div block because it's behind the uh the cursor so the way we want to compensate for this is we want to set like the the clicking of this default to zero you're not able to click on it so to do this we come to the cursor grid and we click add and we come down to embed and we just want to embed this into here now this is going to be available for you to copy and paste down below in the description but we just go style and then we click dot and we call whatever this is uh as being our container for all of the cursor for me it is a cursor grid and then you want to open and close curly brackets and then go pointer dash events not doubly pointer dash events [Music] then finish it like that and close off the style so that's all the code that you're going to need for this to work um again just copy and paste it down below and it will work fine so if we save and close this basically means we can click on this cursor which is always a good thing now at this point this this could be you done this this could work absolutely fine however for us what we want to do is when it hovers over this welcome is to change we want the three dots to basically disappear and we want the larger circle to increase in size and so the way we do this is we select the thing that we're hovering over so in my case it's the welcome for you it might be a link in the um in the navbar it might be a button on the page something like that and we create an interaction so we go element trigger on mouse hover so when the mouse is hovering over this element on the hover we want to start an animation and we're going to click on the plus so we're going to call this cursor hover and we're going to click on the plus as you know we're going to click on three dot we're going to click on the plus and for me i'm going to change the opacity of this it's going to take 0.2 seconds and it's going to not be linear but it's going to be in quart this is then going to drag the opacity down completely for you it could change the color you could change what the actual image is you know it's it's all up to you and then so i'm going to select the larger circle click the plus and i'm going to click scale i'm going to make sure these happen at the same time by dragging them into each other because i don't want the opacity to happen and then for the circle to increase i just want it all to happen at the same time i'm going to make this 0.5 i'll change it to import i'm going to change the scale to 1.5 like so and then i can uh save this now if we preview this it should work there we go like we expected it to however it's then going to stick to that so we then want to create a hover off effect so on hover out we're going to start an animation and the easiest way to do this is to duplicate the one we just created and then go into the settings for this and just undo everything so we're going to bring the opacity up and the scale we're going to change this back down to one click on save like so and then when we come to preview it goes up and then it comes back down again actually i'm not a huge fan of that interaction i'm going to change um instead of using import i'm going to use so then hopefully that means when we go to preview it goes up and then it comes back down like we wanted to so i hope you found this tutorial useful i've definitely found it fun and i implement these into the websites that i create uh if you found this tutorial useful please go down below and hit the subscribe button again uh helps me out a ton and it's completely free for you to do if you've learned anything from this tutorial as well let me know in the comments down below if you've got any questions uh about anything as well in the comments and i'll answer it's something i'd love you to do in the comments as well i know i'm asking you to do a lot but if you use this for a website please let me know and i'll be able to check it out and give you my opinions on it that's been me for this week and hopefully i will see you next week for the next [Music] tutorial you

Channel: Noah Bateman

Views: 1,299

Keywords:

Id: iPcERaJzurc

Length: 16min 53sec (1013 seconds)

Published: Wed Apr 21 2021