(upbeat techno jingle)[Rik] Today we're gonna talk about a populardesign technique, when I click on the site we showan image, and the image pops in placeof where we want it to be.Now this site is called Yokoland.com you can goand play around with it, it's really good fun.Now I've made my own version herewhere if I click on the site we can seewe get our images.Now on my site the images are a little bit smaller,there's only eight of them as welland they kind of loop through.You can see the same image twice.Mine's a little bit different as well, I've got someanimation to fade things in just over half a secondand also some random rotation in there as well.So it kind of feels a little bit more natural.So we're gonna talk about how to do thisin three steps, the first one is we'll make it static.So that the images are always in the same place.Step two we'll make this dynamic so when I click or touch,because we'll make it good for mobile too.They'll be in the place we've just touched, or clickedand third step is we'll add the animation inand some random rotation too.So we'll do this in three steps, static, dynamic,and then some animation and rotation.(upbeat techno jingle)I'm gonna start with something fairly basic,I've just got a blue screen and some text so we'll talkabout what's currently there.I've just got a header with a H1 tag in thereand then my style sheet all I've gotis some default styles.I've got my typography up here, my background colorand text color, I've also made it width 100and height 100, overflow hidden so if we clickat the edges it doesn't have scroll bars,and I just put the header in the right place.With some Z and X on there as well.I've also got eight images in here.Now I've made them twice the size as what I wantto display them, now this is for Retina.So when I have them on Retina size they can be halfthe size, this one is 600 by 400.On the site we want it to be 300 by 200,double the pixel density.Now if I just did this in HTML and CSS how did I do this?What I would do is in my index.html I would addan image tag and then add in a source of project1.jpg.

Now at the moment this will just go in the top corner,you can see it up there how do we move it around the site?Well in my style sheet I would go further down in hereand add in an image selector.Now the image selector will have position absolute.Now where do I want to move this to?Well it depends eventually on where we click.But for now we'll put it in the top 500 pxand the left 400 px and if I look at the page nowwe'll see this top corner being 400 over, 500 down.

But on my site when I click hereI want to move it kind of up into the center.This is the top left corner not the centerof the image itself.So I want to move this across and up as well.So to do that I'm just gonna add one extra thingwhich is a transform and the transform I wanna move thisor translate it if I can type translateby minus 50% and minus 50%.So move it across by 50% of it's own widthand then up by it's height as well.And then there we go this middle point nowis in the right place, I also want to make it rightfor Retina so what I'm going to do as well as move itI'm also going to scale it.So I'm gonna make this half the size it should normally be.So now if I look at the image again,it's in the right place and it's Retina friendly.This is kind of how I want to do this.Now if I want to add a third, a second and a thirdand a fourth image I would go in and add another image tagin my HTML but we don't want to do it in this way.Because we don't have any kind of interactivity.Instead what I'm going to do is have this as a script.So I'm going to add a new script called image adderlet's call it, imageadder.jsagain you can call this whatever you want,it doesn't really matter but I need to add thisto my HTML as well, so instead of this imageI'm gonna replace this with a script tag.And the script source is going to be imageadder.js.Basically whatever I've called this.Now in my style sheet you might notice,this is now sad because there isn't any images on there.We're gonna be adding images in Java Script instead.Now how do we add an image in Java Script?Now the first thing I want to do is have a listof all the images I want to add in Java Script.Now I'm gonna save this to a constant'cause I'm not gonna change thisand I'm gonna call it images.This is gonna equal to a list.Now I'm gonna quickly just add in project1.jpgso that's the first image, now I do want all eight imagesin here so I'm gonna put comma, project2.jpg.Now I'm just gonna format this a little bit more nicerand I'm gonna quickly add all eight so here we go, bink!So there we go I've got eight images in here.Notice the last one doesn't need a commabecause we're just comma separating them.I could write this down a page, it's kinda up to you.Now the next thing that we're gonna do is hold some variablewhich basically keeps track of which image that we want.Now I'm gonna call this one I now I is justfairly commonly used variable of thingsto kind of hold numbers.So I'm gonna make this number equal to zero.Now remember computers count from zero not oneso the first image on here is image zero.We call it project one, the computerscall it project zero so images and then zero is this one.Images then one is the second one,images two is the third one for us.Now we're gonna basically increase this every single time.I'm also gonna add one more thing,I'm gonna add in a function, function round brackets,curly brackets, now I'm gonna give this function a name.So I'm just gonna move my cursor hereand the name I want to give this is something like,well I can call it whatever I like, but placeImage.

Now there's two things I really care aboutwith placeImage which is where it is acrossand down the page, so I'm gonna put in this round brackets,X for where it is across the page, comma Y.Now in this function what this will do is it will placean image where we want it to be placedand that's all it does, it's basically notrunning at the moment.Now again, I can just open these curly brackets outto make my code a little bit easier to read.Now when I want to run this, what I want to do is say,well place an image in this place in two ways.So the way that we would run this is placeImageand then brackets, now I can put two things in hereso like 500 and 400, 500 across, 400 downand I can run this as many times as I want.So the next one we could do that,and let's do three for now, let's do 600, 300.So this will run, this code three times.But dependent on what X and Y are, so how do we place that?What is happening on our page right now, nothing.We haven't written any code to add the image to the page.So, how do we do that?Now in here what we're gonna do is we're gonna havea constant called nextImage, which image do we wantto get from up above?Well in my images list, I want to get whatever I is.

Now for now we're gonna make thisthe first image three times so next imageis gonna be Project one, three timesat the moment, one, two, three.Next we want to actually add an image to the page.So I'm gonna make a new constant called img,kind of like an img tag and this is gonna equal,in my document the whole of my page I want to createa new element called image, img tag.

Now this doesn't do anything yet.There isn't any code that's added to the page.We're gonna make a tag in Java Scriptand then add it to the page.Now what is on my tag?Now we had image, and then source equals somethingso I'm gonna add to my image, I'm gonna set an attribute,that says the source is equal to, well it's the next image.It's project one or project two or project three.So we already know what that is, nextImage.

We also wanna put it in place depending onwhere X and Y are, 500 and 400, 400 and 500, 600 and 300.

But this is done by, in a style itself.So img.style. well we want to do left first'cause it's X so left equals X so 500, 400, or 600.

Now we need to give it a unit as well,so if you remember from our style sheetwe have 500 px, we wanna kinda follow that too.So X plus px and again with the top version we're gonnamake this Y plus px as well.

If we look at our project right now, again nothing happensbecause we haven't added it to the page.Next we're gonna add this image, that's currentlyin Java Script to the page itself.So on the document to the body, now I could select thisin a section tag or a main tag or any other tag,we're gonna just add it directly to the body itself.We're gonna say append a child, what child,well a child is actually just a tag.We're just gonna add this image to here.So take this code here, and add it to the body.So what we should get now is three image tagsadded to our site, one, two, threein the places that we said.But at the movement it's always the first image.How do we make it so that it's addedone to each, one, two three?So we're just gonna take I and we're gonna replace it withwhat I is currently, but we're gonna add one to it.So zero after it's done this becomes oneand after it does it the second time becomes two.Zero, one, two.Let's have a quick check and there we go,one, two three, well it's actually one, two, three.Now obviously we will eventually run out of thisso we'll eventually get to number seven, I is sevenwhich is obviously eight, how do we make it loop?Now if I want to make it loop what I'm going to do is sayif I is now bigger or equal to the amount of imagesthat we have, then we want to go back to the start.I is zero, so basically we're looping thisevery single time 'cause if we have nine of these,we want to show the first image again.So now looks the same, but no kind of difference in hereand the next step we'll make this dynamic.So rather than placing it ourselves,we'll do it on a click or a touch.(upbeat techno jingle)Now at the moment we've got three placed images.Now we don't actually want thatbecause this is kind of manual, we want to make it dynamic.So instead I'm gonna replace these.What do I want to replace it with?Well I want to do things on a click,where do I want to do it on a click?Well anywhere on the page.So on the document itself I'm going to addan EventListener, now I'm gonna do somethingwith this EventListener, what am I going to do it on?Well I want to do it on a click.Now what do I want to do on a click?Well I want to run a function, I want to do something.So function round brackets, curly brackets.Now with any kind of EventListenerwe can actually pass through what the event is in here.Now just like further up in the pagewe have X and Y we want to do the sameI can call this E or Ev or event I'm gonna call mineand then I can use this event in our code.I'm just gonna open those curly brackets.Now the first thing I want to do is stop the defaultthing from happening, and to do that we take the eventand do something with it..preventDefault and then we stop that.

So this just stops the default thing from happeningfor instance if we clicked a link it would stopclicking the link to go to the next page.We wanna control our Java Script.Now again I can do some like placeImage in here nowand do 500 and 300 or 400 or 500and what we get now is when I click,we get all of the images popping up in that same place.Now how do we make it so it's in the right place instead?So to do that I'm gonna take the eventand replace it with pageX and event.pageY.

So X when we pass it in to placeImage is gonna bewhere we just clicked, and Y is gonna be the eventand the place on the page where we just clicked.Now watch out for the capitals here,it's pageX capital X, pageY capital Y.But now if I go back to my page,and click in the right place we actually get this popping upin the right place every single time.But what, how do we do this on mobile as well?So I need to do the same thing on mobilebut as a separate event so here I'm just going to dodocument again, addEventListenerand now I'm not gonna click, I'm gonna do this whenwe basically lift our finger off the page.Touch end and again I'm gonna write a function,round brackets, curly brackets.And in here just like before I'm passing an event throughbecause I want to stop the default thing from happening,

I'm gonna do preventDefault looks fairly similarto what we have above and again I want to placethe image in the right placeand again I'm gonna do event.pageX comma event.pageY.

Now currently I'm on the desktop but if you try thison a mobile phone as well or an iPadthis will work in the same way,but what we get now is when we clickall of these places we actually get images popping up.The next step we'll make this kind of fade inand we'll add a little bit of rotation on there too.(upbeat techno jingle)So how do we add rotation to a page?Well at the moment what we would dois we would add it in to the transformand say well I want to rotate every single oneby let's say 10 degrees.Just to make it very very clear,so now if I go back to my site and you should see thatevery single image is rotated by 10 degrees.But we want to make this random we don't want to justdo this at 10 degrees every single time.So what I want to do is in my Java ScriptI want to change that style.So in here I'm gonna do below my image startup,I'm gonna change the style of the transformand this is gonna equal to rotate by 10 degreesand we don't want it to always be 10.So instead I'm gonna delete 10 and put some quotesplus and then a plus and the quote again.Now in here we can put in anything we want,so this is adding something that stays the sameto something in here that will change,to something that stays the same.Now I'm gonna put this in brackets,I want to do math.random and then brackets.Now this is going to times by let's do it by 20and go from zero to 20 random number between there.But this will do it between zero and 20.But we want to do it from maybe like minus 10 to minus 10.So I'm gonna take 10 away from this as well,so between minus 10 and plus 10,we're gonna add some randomness now.Now if I look at the page again,you'll see that it does add these effects in herebut we've removed the scale and we removed well,we want to put it where in the center again.Now the reason why it's done that is it's overwrittenthe whole of my style sheet.So the whole of my style sheet in here has the translate,and the scale, and the rotate.So this has all been removed.What we're gonna do is just quickly addat the start of here, the translate minus 50, minus 50and then the scale is 0.5.So I've got the three things in here,this stays the same it's in a string.This stays the same it's in a string.Half of this is in a string but then the randomnesskicks in and the rest of the string is there.So now if I go back and I refresh.

We get some randomness in here now.So this kind of feels a lot smoother,it feels more natural but let's add one more thing in here.Let's add a fade to this, now we don't need to do thisin just Java Script we can do thisin the style sheet ourselves.So I'm gonna go to the styleand I'm gonna add in an animation which just fades it in.So above my image I'm gonna add a keyFrame,keyFrames and what should we call,what should we call this keyFrame?Well I'm gonna call this fade in because that'sthe job it's doing and then we could leave some brackets.Now I'm gonna start at 0% and say the opacity is zeroand at 100% the opacity is one.

So zero to one this is the fade between them.Now let's use this keyFrame in our image.So whenever we have an image we fade it in to the page.So we add this animation, what's it called?It's called Fadein, how long do we want to fade it in over?Maybe .5 of a second and that's it,that's all we need to do.So now if I go back to my site,I should see these fading in.Now this is kind of basic version of the site.We could add some different things in here,so what we'll talk about next is how to addsome variation to this.(upbeat techno jingle)so one variation I could add is at the momentthis pink image is behind all the other images.Wouldn't it be nice is if I hover it,it brings it to the fore?Now how do I do that again it's not just usingany Java Script you can just do this in CSS.What we want to do is say on an image,if we hover it we're just gonna move it to the fore.Now by default all these images are Z index zerowe're just gonna move it ahead of everything else,a little bit closer Z index is one.So now if I'm going on my site and I start clicking aroundyou'll see that the one that I'm hovering on,goes above it so that's a very quick variationthat we can add.

Another one that we might want to addis randomness on mouse move.Now at the moment I'm doing things on click,but wouldn't it be nice if I do itwhen I move my mouse instead?Now to do that I just go down to pageand instead of click I'm gonna change this towhenever I move my mouse, mousemove.

So this gets very heavyand you can see it's gonna be moving very very quickly.How do we get this to stop,well we could add some randomness in hereand say well maybe every 20th image should show.But make it a little bit random as well,so to do that I'm just basically gonna putaround my placeImage if Math.random is bigger thanlet's say .05, now this is basically every 20th one,we're gonna do this stuff in here.So basically around the placeImagethere's some randomness involved.Let's see how this looks, so now if I movearound the page, it is a bit randomand again it's not perfect.But you can kind of see that every, roughly 20th placeis kind of doing this as well.And again when I hover it's kind of acting upso maybe not do both at the same time but againI'm not clicking on the page right now.Instead I'm just moving my mouse insteadand I could add this as a thresholdI could even say you know maybeyou want to add a counter in here.So maybe say every 20th one we do itrather than the random one.So mouse is zero and for every mouse movewe add one to it, we go mouse is mouse plus oneand then we say if mouse modulo 20,so if the remainder of this is 20 so you know,40 is modulo 20 is equal to zero.That means every 20th one we do this so nowit's every 20th one rather than randomly 20th.

So there's different variationsthat we can add into this we're not doing thingson click we're adding some randomness into this as well.So this is kind of how we can make somethinglike the Yokoland site, so we can add lotsof variation to this project,rather than just kind of keeping it exactly the same.There's lots of things that we can do with this.If you liked this video you'd really loveour Foundation HTML, CSS and Java Script course.(upbeat techno jingle)