Magnetic Custom Cursor in Webflow (Sticks to Buttons)

what's up youtube in today's video i'm going to show you how to create a magnetic cursor that sticks to your different buttons and links across the site subscribe if you'd like to see more tutorials like this and thank you so much to those of you who support this channel allowing me to give away more content so i wrote some code that we'll be able to use for this and basically just copy it and go over to your project settings in the before body closing tag section that's where we want to put the code and for now i'm just going to put it in the page settings closing body tag because i want to be able to see it and work with it so we have a class of cursor and that's what it's looking for so i need to create a div with a class of cursor and just apply that to the site and then we can kind of style it how we want i'll do 26 pixels for the width 26 pixels for the height it needs to be set to position absolute and don't anchor it to any corners and then we'll give it some sort of z index that way it's above whatever we want it to be above um you can style this one how you'd like but i'm going to give it a radius of 50 to round it off and a background color and that is looking pretty good for my cursor so i'll go ahead and publish this and we can kind of see what's happening on the live site so on the site when i hover it's definitely following my mouse whenever i leave the page it disappears and it reappears with the opacity and then whenever i go over to link block it just snaps to the center of that link block but it's very snappy it's not very smooth so we can set how much we want it to lag and how smooth we want it to be with transitions on that cursor class so i'll go over to the transitions panel and it's being moved with the position feature with top and with left so i need to make sure whatever speed i apply i apply these to both and so i'll apply this to top and don't set any sort of easing because it can get choppy make sure your easing is set to linear and then for the second transition we need to do the same thing but this time apply it to left and again we're going to make sure that we don't set any easing on that so this is at 200 milliseconds we can increase it or decrease it if we'd like to get the feel just right but let's let's uh test this out so now it's lagging a lot more and whenever i hover over to the corner of a link block you'll see it slides into the center and just stays in the center anytime i move around that link block so that's working just how we want now whenever we're hovering it's still snapping out of you instead of fading so i'm going to add another transition and this time to opacity and this one can have an ease and this one will fade so we can also make the cursor look different how it's working yeah we can make the cursor look different whenever we hover over something we can change the look of it and we can also change the look of it anytime we click down on something so to do that if we go over to our code you'll see at a class one hover it's adding this class of cursor hover so i can create a combo class and web flow called cursor hover style it how i want and then i can make it look different also it's adding a class of cursor press whenever we press down on something so if i were to for instance add this combo class cursor pressed i can change the maybe i'll change the size of it to something like i don't know 8 pixels and 8 pixels make it really tiny so that's what's going to happen anytime i press down and i need to remove this combo class before publishing that way my cursor looks the way it's supposed to look and then on the live site now my cursor is default i move out it fades out whenever i press down and hold it it sort of jumps down to this size now again it's really choppy so you can add a transition and this tie and apply it to um apply it to the width and also to the height since that's the properties we adjust it and once we have that set uh back on the live site now we'll refresh and now it scales down instead of snapping down so that is perfect so what if we want a custom look and feel depending on what we hover over like maybe we want it to change just the logo to not snap to the center but to do something else so we could grab the class which is logo and then we can come over to our custom code and then down here we can copy this add class one hover and create a new hover state this one will be on hover of logo and we'll change what we're targeting from all links which is that a to a period to represent class in the word logo and make sure to add that class to the hover out state as well logo and then we need to say whenever we hover on to the logo we want to add a class and we'll call that class logo hover and when hover out we want to remove the class of logo hover and we'll save that so now i'll create the combo class of logo dash hover and then we want to change the size of it so for a width and height i'm going to oh and that needs to be applied to the cursor so we'll create the class logo dash hover within height we'll set to maybe 10 pixels by 10 pixels something like that maybe 8x8 and then we can set its position to sort of offset it from the um it's from the logo so i'll add a transform and this will be moved so by default it's in the center i'll just move it over a little and i'll move it up just just a tad and then let's go ahead and publish this and let's see what it looks like so i actually need to remove that combo class publish and then we can test it out so now on the live site drag around hover over to the logo and it scales down and just snaps to that part of the logo creating this kind of nice effect everywhere else it's still snapping to the center of whatever i hover over even this link down here is snapping directly to the center of it one more thing if we wanted to create a custom image like say anytime we hover over this video we want it to maybe make an arrow appear or something we could do this so we'll create another hover state one more time this time we hover over the class of video and then this time we'll change the class it's going to add the combo class to video hover instead of logo hover so then we can go over to the cursor add a class of video cover and then we can maybe give it some different styles like maybe it's going to have a background image and the image would be this arrow and it would be set to center cover or contain no tile um and then we can set our background to transparent maybe on this state we wouldn't want any sort of radius and then we'd increase the um the width and height quite a bit 80 pixels and 80 pixels something like that so now if i remove that combo class and publish and i can go back over to the live site so i can hover over these links and snaps into place i hover over the video and it creates this sort of arrow that's just following my cursor inside the video hover out it turns back to a regular cursor so um i hope you enjoyed this tutorial that's how to make a custom cursor that can change its state that can snap to different links all inside webflow catch you next time

Channel: Timothy Ricks

Views: 10,662

Rating: 4.9916143 out of 5

Keywords: webflow, how to, tutorial, lesson, cursor, custom, custom cursor, magnetic, sticky, sticks, fixed, change, button, link, javascript, jquery, code, video, transform

Id: A2yzN7NSUo8

Length: 7min 58sec (478 seconds)

Published: Fri Oct 30 2020