June 28th 2018
So at the moment, we're not using thembecause we're sayinginstantly the ball should be at the mouse,so mouseX and mouseY.But what we actually wanna dois say the ball should be at ballX and ballY,so instead here I'm just gonna change thisto ballX and then we'll change to ballY.
But this never updates,so at the moment, ballX and ballY are always zero,so now it doesn't move around the page at all.Now obviously what we wanna dois update the ballX and ballY position instead.So in this animate, what we're gonna dois say, well just for now,we'll say that ballX is equal to exactly the same, mouseX.
So whenever we update the mouse position,whenever we do the frame as well,it's just gonna be the same thing,so ballX and ballY is the same thing, that equals that,and then when we update the ball,it's in the same position.So now, again, we're back to what we had,but what we wanna do is actually add some delay.So what we're gonna dois add some kind of speed, let's call it.So I'm gonna make one new let out here.So let equals speed.Now this is gonna be equal to quite a small number.I'll talk about why it's a small number in a minute.So 0.02, now this works good for me,we can change this later on.What we wanna do is find the distancefrom where the ball currently will beand where the mouse isand kind of add some movement towards the mouse.So what we're gonna do is add one more thing into animate.
So in animate, what we're gonna say is,well, what is that distance?Well, if my ball is over here,and then my cursor's over here,we kinda wanna move it quicklythan if it was close.So the first thing we're gonna do is let distance X,now what was the calculation,what is distX?
Well it's where the mouse currently is, mouseX,minus where the ball is.So if my ball's at zero and my cursor's at 1000,that difference, distX, is 1000.And I also want to do that calculationfor distance Y as well, so mouseY - ballY.Now obviously at the moment this is always gonna be zerobecause the mouse and the ball are at the same place.But instead of them always being in the same place,what we wanna do is calculate where it should be next.And the way that we do thatis instead of this being mouseX or mouseY,we're just gonna change this to, well,where it currently is,but let's also do a little bit of the distance towards it.So plus, and we'll do this in brackets,(distX * speed)and we'll do the same thing for Y as well.ballY + (distY * speed) too.
So basically what we're doing hereis we're saying find out where you currently are,then find some of the distanceand times it by some factor,in this point, 0.02.
Now what we'll get nowis we'll see something that looks a lot smoother.Now if I do want to change that speed,all I need to do is change that.So the quicker, or the higher number,the quicker it'll move towards the ball.So for instance if I do 0.1,this will feel very, very quick.Whereas if I do 0.01, which is ten times as slow,what we'll get is something that moves a lot slower.But we get something that looks a lot smootherthan when we did it with transitions earlier.All we've done is a little bit of math.All we said is work out the distancewhere the mouse is currentlyand where the ball is currently,then update the ball's position where it currently is,but add some of that distance and times it by a factor,and then all we're doing is updating the ball's position,and we keep looping on this over and over again.Then later what we're doing is we're saying,if the mouse is moving, update the mouse position,and then when we loop this again,it just recalculates things.What we'll do next is we'll add some extrasto show you some of the CSS things that we can do as well.(upbeat music)
In my final design,I've actually got this kind of effectwhere it kind of does the inverse,kind of almost like a spotlight effect,so how do we actually do that?Well at the moment, what I've got right nowis a white circle over white text.All we need to do to add that inis actually in style, it's a CSS feature.What we're gonna do on our ballis just add one extra thing in here,and that extra thing is similarto what we do with Sketch or Photoshop or Figmais say mix-blend-mode,so the blending is the complete opposite,so the difference between the two,and as soon as we do that,all we'll see is just, here we go, there it is,so we're just doing the difference of the two.Now, if I wanted to do any kind of effectsto the size of the circle,let's say we kind of wanna just expand it,almost like a heartbeat style,how would we do that.Again, this is can be done in CSS as well.We can add in something like a keyframe,keyframes, sorry, plural.And we wanna do something called a heartbeat.Now what we wanna do here is actually change the scaleso it's a little bit bigger,and to usually do that, we'd add in the transform.Now we're already using transform,so we don't wanna override it too much.So we're gonna start off at zeroand say zero is transform.We're gonna keep the translate(-50%, -50%)which is already there,but also add a scale of one.So that's a zero, it starts off as zero,now at 50%, I'm just gonna copy this underneath,at 50% the scale will go to,I'm gonna exaggerate this quite a lot, but 0.5,and then that 100% back to normal, which is 1.
So it goes from 1 to 150% to 100%.Now to add this keyframe into the ball,all I'm gonna do is add the animation,what is the animation called,well this is called heartbeat,how long do we want this animation to go over,let's say five seconds,we could shorten down to make it quicker,and how often do we want to do this,well we wanna do it infinitely,we wanna keep looping over this.So let's see how that looks.So now what we'll seeis you can see it kind of breathe in, in and out,there it goes, up and down.If we wanna do this a little bit quicker,we can just change that five seconds to be even shorter,so say, one second, so it's really, really quick.
And you can see again really big, really, really quick.So if we want to addany of these kind of CSS things in here,it's pretty straightforward to do as well.(upbeat music)
June 28th 2018