[Rik] Hello.A few of my students wanted totalk about how this website works.So this is barronwebster.com.Barron is a designer in America.As we move our mouse around the page,you can see that all of these different kind of imagesresize to fit where the mouse is on the page itself.Now, this effect is used quite oftenin a lot of web design around the whole of the web.We can see it in different sites like ToyFight.ToyFight are an agency in Manchester, in the UK.As we move my mouse around the page,they're doing it a lot subtle way.So, as we move around on the left and right,they're moving theirs in the opposite direction as well.So, both of these are using the same kind of effectto actually move things around the page.As I move my mouse on the page,do something with the content, move it in one direction,I'll change the width and change the height.So this is what I wanted to talk a little bit about today.Now, the first thing I wanted to dois talk about how we made the assets.So, in Sketch, I've made three different assets.We're gonna make four.I want to make a similar kind of website to Barron's,which is Learn To Code Now.We're gonna just quickly make the fourth one.So, I'm just gonna type something out, NOW.I'm gonna convert it to outlines,and then I'm gonna resize.I need to just take off the lock on the page,and what I'm gonna do is just resize it to fit,and roughly about that size will do for now.Now, I've already kind of exported this already.We would generally do this as SVG files,because they're scalar and they don't pixelate,but it takes a little bit of extra preparation work,so for now, what I'm going to dois just export them as PNGs.Now, I've set up a few things in SuperHi editor,just to kind of speed this up.So, this is my index.html, this isthe home page of our website.Now, I've added some image tags in here already,so we can see on the page we've got image,with the source, learn.png, which I've already uploaded.Now, I've given this a class of learn,so I can actually use this in CSS.Now, CSS is the style of the website.We're not gonna worry too much about this just yet.It just gives us a hook to use with CSS later on.So, basically, I've got four image files,each with a different class, each with a different source,for the different images on the page.At the bottom, I've got two script tags.The first script tag is jQuery,which is a library we can use to speed things up,and then, my file, which I'm gonnawrite my code in, movement.js.Now, if you look at the site at the moment, what do we have?I've just got LEARN TO CODE NOW.

Now, this is just as if it was a big image file.I can't fit it on the page,so they just go down the page instead.So what do I need to do?So the first thing I need to dois change how they look on the page.I'm gonna go to my style.css.Now, I've given this some default background already,this yellow background.What I want to do is move thesearound the page, first of all.So I've got four image tags on the page that I want to use.So I'm just gonna select them all to begin with.I'm gonna select all the image tagsand do my curly brackets.Now, the first thing I want to do is actuallyfix all of the images, because they're gonna befixed to the top left, top right,bottom left, and bottom right corners.So I'm gonna use position, fixed,to kinda fix them in the right place.Now, they all have different widths and heights eventually,but I'm gonna give them all a defaultwidth and height to begin with.Now, the width I'm gonna give them is 50% across the page.And the height is, again, 50% down the page.Now, if you look at them right now,all four will be overlapped in the top left corner.So what we need to do is move them around the page,so we have one in the top right,one in the bottom left, one in the bottom right, and so on.So, how do I do this?If I quickly go back to my index.html,I can see that all of my image tags have a different class.The first one has a class of learn,the second one has a class of to,class of code, and class of now.So I'm gonna use this class tomove them into the right place.So how do we do this?So, first of all, I'm gonna select my image tag.And then, I'm gonna use a dot to select a class.The first one is called learn.Now, learn doesn't mean anything.We can call it whatever we like.It could be called potato, or Rik's special HTML tag.But for now, we're just gonna call it learn,because that's what the content is.I want to fix this one in the top left.So I'm gonna say the top is at zero pixels,and the left is zero pixels as well.Now, this won't look anything different at the moment,because that's the default.For the next one, we've got an image,which has the class of to.And I'm gonna add my curly brackets to do something with it.Now, I'm just gonna move this up the pageto make it a little bit easier to read.Now, we don't want this in the top left.We want this in the top right.So I'm gonna do top is zero pixels,and the right this time is zero as well.So you can see now we've got to in the top right corner.It's 50% of that width of the page,50% of the height of the page.Now, I'm just gonna quickly add code,which is gonna be in the bottom left.

And give ourselves a little bit more room.And we've got now, which is in the bottom,zero, and right, zero.

So at the moment, we've placed all of our imagesaround the page, one in the top left,one in the top right, and so on.Now, at the moment they don't do anything on movement,because this is how it should look on page load.Now, whenever we want to do somethingafter the page is loaded, we use JavaScript.So, what I'm gonna do is, I've already addedtwo script tags into my page.The first one is jQuery, to make ita little bit easier to write this code.And the next one is movement.js,which is something that I'm going to write.At the moment, my movement.js file is completely empty.What do we actually want to do?Well, when I move my mouse anywhere on this web page,I want to move all of the images.So, because I'm doing it on anywhere on the page,I need to select the document.Now, dollar, which is jQuery.We're selecting the document, the whole page, with jQuery.Next, we want to do something on a movement,so we're gonna do on.Now, this could be on a click, it could be on scroll,it could be on submit of a form, let's say.But we don't want to do it on any movement.We just want to do it on mouse move.

Now, mousemove has to run every single timewe move the mouse cursor one pixel in any direction.Now, what do we want to run?Well, we want to run a function.So I'm gonna do a comma, function, space,round brackets, space, curly brackets.So this is just my jQuery.All of my code is gonna liveinside my little curly brackets.So I'm just gonna open them out,to make it a little bit easier to read.Now, there's one extra thing that I needas part of my function, and that iswhere the actual thing, where the cursor is on the page.So within my round brackets, I'm gonnagive ourselves a variable, something that changesevery single time we move the mouse.I'm gonna call this event.Event doesn't really mean anything,but it just passes in some extra information to the page.So, what do we want to do?Well, what I want to do is select, first of all,my image with the class of learn,and size it depending on where the mouse is.So, as I move my mouse over here,I want to move the width and the height of the imageto exactly that point on the page too.

So the first thing I'm going to dois select the image with the class of learn.Now, I need to put this in quotes,because it's not a special word in JavaScript.Document is, so we'd need to put this one in quotes.Then, I want to change the CSS.And I want to change the width, first of all,depending on where the mouse is across the page.So I'm gonna add a comma to say where it's going to be.Now, event, that we've passed intothis whole of the function gives us some extra information.We can say the event pageX.

Now, pageX is where the cursor is on this page.So what we'll get at the moment is,as we scroll around this page,the first image will resize to fit where the mouse is.If I move my mouse up and down,it doesn't change size, so that'sthe next thing we want to do.Now, with pageX, X is across the page.We want to change the height as well.So, just like before, I'm gonna select the imagewith the class of learn, and change,well, not the width this time, but the height.Now, we don't want pageX, that goes across.We want pageY, which goes down the page.

So now, as I resize the page, this movesin all different directions.Now, with to, we don't want to dothe width of where the cursor is,because where the cursor is at the moment is quite small.We want to do where the cursor is,and the whole of the page, the difference between the two.So that's the next thing that we're going to add in.I want to select the image with the class of learn.And I want to change the width.Now, I don't want to change just the cursor of the page.I need to know how big the page is as well.So I'm gonna select the whole of the window.The window is the bit of the page that we can see.And see how wide it is.Then we need to take away how farthe cursor is across the page.So now, oh, I did learn, not to.

So now, you can see that they both independently react.So one depends on the actual cursor.The other depends on the width of the pageminus the cursor position.So, together, they add up tothe 100% of the width of the page.Now, the image with tokeeps the same height as learn.So we can do event pageY.

So now, we have two that kind of scrollaround the page in the same way.Now, with code and now, we kindawanna take away the height of the page as well,to kind of keep that into consideration.So, for the next one, we're gonna do img.code,and change the width, first of all.Now, the width is gonna be the same as learn,'cause we want them to line up.So this is event.pageX.

So let's just check.So that works in this direction, they kind of line up.Now, with the height, I wanna take awaythe height of the page as well, first of all.So we'll change the CSS height.

We wanna find out the window, the bitthat we can see of the page, how high it is,and then take away the pageY.

So now, we've got all three.Now, with the last one, we kinda wanna do bothtaking away the window height and the window width as well.So we've got now.We're gonna take CSS, find the width.And we need to remove, first of all,the width of the window,window width minus pageX.

And we wanna do the height as well.

And we'll do window.height,and minus pageY.

So, very, very quickly, we've madethe kind of Barron Webster website.Sorry, Barron, for kind of showingeveryone how this is done.But, very quickly, we can addthese effects in really quickly.Now, with something like ToyFight,they're just doing this in a very subtle direction.They're finding out where the middle of the page is,and taking away the distance.So we might be about 200 pixels from the middle of the page,so maybe move it by 20 pixels,maybe add a ratio in there, a percentage difference,just to kind of add a subtle effect to it.But hopefully this shows that these kind of effectsthat look like this, we've made oursin a different font, in a different color,can be done really, really quickly.