[Instructor] In the previous videowe talked about how to make these arrowson the Anyways site, so we have lots of arrows on the pagethat point at our mouse cursorbut what happens if we want to flip this aroundto say we want an arrowthat moves where our mouse movesand points at a fixed position on the page,so kind of flipping this around,so let's talk about custom cursorsand how we can make those.So, I've quickly just made a very simple pagein my editor,so I've got no content in here at the moment,I've got a style sheet,background color's just orangeand I've got a minimum heightjust so I've got some content to move around inand this just looks something like the Anyways site.Now, I've just made a custom cursor in Sketch.It's basically just a triangle and the rectangle togetherand the size of this is 50 pixels wide by 100.Now, I've exported this as a PNG.Unfortunately there isn't custom cursors for SVGso we have to do it as a PNG for this onebut I've just saved itand I've kind of put it on my desktopand I've imported it into my project.Now, to add a custom cursor,it's pretty straightforward.All we need to do in our bodyis say cursorand then say the URL of the cursor image,so I can do URLand this is cursor.png and bracket.Now, you might notice that this has an error.Now, the reason why it has an erroris if we don't have that image,we wanna fall back to something else,so we're going to do a comma and then autoand that looks correct.Now, what we'll get is if we view this in our pageis we'll get an arrowthat follows our cursor around the page.You can't see the previous onebut we just have this one.Now, you might notice, if I go right to the top cornerof the page, and just pop out,the arrow position isn't in the correct placebecause if we look at the image,I'll kind of point on this arrow,isn't in the top left corner,it's actually 25 across but zero down,so what we're gonna dois just quickly add some extra little line of CSS,so in our cursor after URLbut before this comma, we're gonna do spaceand say 25.We don't need to say PX, and zero as well,so 25 across and zero down.Now, if I go back and have a quick look,you can see now that if I go to the edgesof the page,this kind of pops into the right place.So, this quickly adds a custom cursor.Now, the problem that we have hereis if we want to make anything turn around,this won't work using just the cursor.Cursor can be a static kind of image.It can't do anything else apart from that.So, I'm just gonna quickly remove thisand what we're gonna do insteadis have another custom cursorbut we're gonna fake it this time.What I'm gonna do is in my index.htmlI'm just gonna quickly add a div tagand in this div tag I'm just gonna give thisan ID of cursor.Now, I've given it an ID rather than the classbecause there's only one cursor on the page.We could have said class in here insteadbut for now, we'll keep it nice and simpleand what I'm gonna do is style this upin a very similar way to before.What I'm gonna do is say a div with the ID of cursorand we're gonna make this one position absoluteand this one has a certain width,a width is 50 pixelsand the height is 100 pixelsand it has a background imagewhich is cursor.png.Now, if I see this on the page right now,what we'll get is this,just the kind of static image.Now, what I actually want to dois make this image follow me around the page.What we're gonna do is actually do thiswith JavaScript instead.Now, what we kind of want to dois say the top position is let's say 200 pixelsand that left position is 200 pixels as welland this moves this fake cursor around the page.So, what we're trying to do is basically updateour top and left position.Now, I'm gonna get rid of these for nowbecause we're gonna do this in JavaScript itself.

Now, I'm just gonna do this in pure JavaScript,I'm not gonna use any libraries like jQuery.We could use jQuery just to kind of make ita little bit easierbut let's do it in the kind of harder way instead.What I'm going to do is add a quick scriptand I'm going to call this one cursor.js.Now, currently this is empty.We're gonna add it to our page first of all,so underneath my div ID cursor,I'm gonna add this script cursor.jsand just close it like that.So, just watch out for this kind of closed tag here.What we're gonna do is go into cursor.js.What do we want to do?Well, whenever we move anywhere on this page,we want to do something.What do we want to do?Well, we wanna update where this div ID cursor is.So, we're gonna pick the page,this is the documentand what I'm gonna do is add a dotand then add an event listener,so we need a capital E and a capital Lin listener in thereand I'm just going to do some brackets.What do we want to listen for?Well, in quotes, the mousemove event.What do we want to dowhen we do the mousemove event?Well, we want do something, a function,so function, round brackets and curly brackets.Now, we can also pass in an extra argument in here,basically some more informationabout the event itself.Now, this is a variable, I'm going to call it eventbut it could be called E or EV,it doesn't really matteras long as we know what it means.Now, I'm just gonna make this a little bit easierto read by opening up these curly bracketsso I've got some space.So, what we get is basically whenever we move the mouseon the document, it's going to do this function from hereall the way to here.What do we want to do though?Well, we want to find out where the cursor is.Now, this is based on this event,this passes some extra information.What I'm going to do is hold it as two different things.Now, in fairly new ES6 which is kind of the latest versionof JavaScript, instead of using variableI'm going to use const which is constant.This doesn't change within my function,I'm just going to say X,so where is this in the X direction?Well, this equals something within my eventscalled the .pageX.

Now, we have a similar one for Y as wellacross the page, Y is thatand event is pageY.

Now, we're just holding these as kind of variablesor constants at the moment.What we want to do is actually updatethe div instead.So, what we're gonna do is find the cursor this time.Where is the cursor?Well, in my document,what I want to do is my queryselector,so this is a little bit like CSS,div with a hash of cursorand what do I want to do with this?Well, I want to update two things,the top and left position.So, my cursor which is just from this one up here,I want to change the styleand I want to change first of all the left positionto be X plus pixels.Now, this gives you a number backso we want it to be 200 PX rather than just 200and with our cursorwe want to change the style from the top as wellwhich is Y plus PX.Now, if I quickly just look at this now,we'll have something that looks fairly similarto what we had from before.Now, you might notice as wellthat my cursor isn't attached to where my cursor actually isso we want to just remove maybe 25 pixelsto kind of shift it over to the left a little bit,so to do that,in the X direction I'm going to sayminus 25, so it moves it over.So, we'll just check right now,what we should get is the pointer at the right place.Now, I'm gonna leave my cursor herejust for the moment.I'll remove it with CSS laterbut I just kind of want to show youthat it's in the right position.Now, what I want to dois actually make this arrow pointat the middle of the page somewhere.So, what I need to do first of allis find where the middle of the page is.Now, this could be a different pointbut what we'll do is just further down here,we'll do our kind of mathsof where we want to kind of place thingsin the middle.So, I'm going to make a new constantcalled target X.Now, I could set this to be 200 pixels by 200 pixelsbut I want this to be right in the middle,so my window which is the kind of viewable areahas an inner width.So, that's the whole width of that,how big is the browser window?Well, if it's in the middle,I want to divide that by two.So, the width at the momentis from here all the way to here.one is 1380 so I kind of want it to be halfway.Now, I wanna do the same thing for the target Y,so I'm gonna make a constant target Yand this looks quite similar,it's the inner height divided by two.Now, there's some of math that we have to do.If you don't know the math again,just go back and watch the previous video.There's a little bit more explanation in therebut what I'm going to dois kind of find the angle between the twoso we can kind of rotate this.So, I'm gonna make a new angleand this is using some math in JavaScript.We're gonna use a thing called atan2.So, if you remember cos, sine and tan,you'll kind of know this.So, I'm gonna say Y minus the target,so where my mouse is minus the point we're pointing atand comma and the X and the minus target Xand this is going to give us back an anglethat kind of says things like you are a certain degree awaybut it's not actually in degrees though,actually gives us radians back,so what we ought to turn it into is degrees.So, the way that we do thisis we take the angle,we times it by 180and divide by math.PI.Again, this is just using kind of elementary school mathbut unfortunately you kind of have to do this.It's a little bit frustratingbut that's kind of how it works.What we want to do nowis turn the cursor to point at that midpoint on the page.So, at the moment, we're not using any of this,we're just saving it as constants.All of this stuff isn't doing anything to the cursor,so at the bottom of the page,what I want to do is change the cursor's styleand I want to change the transformbecause what I want to do is something like rotateby 30 degrees.

If I look at this right now,you'll see that my mouse cursor is pointed.Now, the problem that we have is actuallythat my rotation isn't around the kind of pointof the cursor, it's around the center pointof the entire cursor itself,so instead of it turning round this point up here,we're turning around the midpoint.So, we just need to change our CSS just very quickly,so in my style sheet in my div with the ID of cursor,I'm going to change the transform origin.Where is the point we want to turn this around?Well, it's 50% acrossbut it's zero.The default is in the middle,we want to turn it 50% across and zero at the top,so now if I look, you'll seethat this is kind of following me aroundthe right point of the page.But this will now turnusing our JavaScript 30 degrees.Now, I don't need it to be 30 degrees,I want it to be this degrees constant instead.So, I'm just going to get rid of 30and I'm going to put a quoteand a plus and then the degrees,oops, if I spell that right, degreesand then another plus and the quotes.So, this bit rotate stays the same.We're going to add it to degreeswhich is kind of the calculation up here,we're just gonna add to the rest of this as well.So, now if I go back and see,what will happen is you'll start to seethat this cursor rotates.It's not pointing at the middle of the page though.How come?Well, the reason why is because this calculationarc tan2 would really dependon if this arrow was pointing to the right instead.So, we wanna shift it by 90 degreesso it goes in the right direction.So, what I'm going to do in my degreesis just say this is gonna remove 90 degreesso it points in the right place.A little bit more math but unfortunatelywe just kind of have to deal with it.If I go to the page now,you can see that this easily now pointsto the middle of the page.Now, you might notice that my cursor,my actual default cursor is still there,how do I get rid of this?Very simply, all you need to do is go backto my style sheet and say my cursor is noneand what that will give me nowis something that follows me around the pageand points to the right place on the page.Unfortunately if you move quite quickly,it will overwrite but it's kind of oneof the limitations that we have.We can easily change this code as wellto say maybe if we want to point at a difference place,instead of it being in the center,we could say 200 and 200,so point it at a different position.You'll see now that this points around that pointof the page insteadbut we can easily change how this target works.We're just doing a little bit of math,kind of doing the kind of the calculations,turn it into degrees and then transformingthe style of this.