hello Gary Simon design course calm today we are going to finish up our move located css3 livings by rating out some HTML CSS and then some jQuery and constituting everything just kind of animate and taken together as you scroll down the sheet alright so as ever I check out design course comm and subscribe here on youtube if you haven’t yet alright so let’s get started here basically we want to work within the body labels and the first thing we’re going to do is come over here and I need to move something out of the way all right there we go I basically we want to get the HTML for this portion right here so mostly it’s just going to be a single div label and then this in here so let me switch over to I have like a cluster of these windows open there we go okay so div and I’m going to do one second alright so ID we’re going to call this above the fold and I’m going to use an h1 for the entitle scrolling CSS animations with J query h1 and that very simple and then the next is a container for the actual portion that’s going to hold our three likeness so div class receptacle twelve now that’s a predefined class in our eleven forty CSS and so mostly it’s just it’s not really important to know exactly what that is for this tutorial we’re going to give it an ID of move so we can reference it and then inside we’re just going to have our three images so image source equals personas reduce telephone PNG we’re going to give an ID a phone and then just take this and copy it speed that two more epoches so phone and then we have the check and tablet do these and mimic those there we go so that’s all the HTML is very simple all right so save that and now we want to go into our vogue to CSS and actually get started with our first label which is above the bend alright so above the crease and inside of it we’re going to kept a background color so let’s go to photoshop and get that specific shade reproduce that down there glue that there the stature is one quick way the owning it is just getting out the rectangular pavilion implement simulate coalesce two restraint in its obstruct 759 there is a tool for that I never truly picked that up on that though but yeah I think it said 759 somewhere around there it’s not too important text – align Center and then the color of course we want the font to be white by default it’s black alright so let’s go ahead and open this up so let me doubled click on this all right so this is what we’re working with so far alright so what we want to do is change this to the appropriate font so let’s go back to style it’s going to be oops bleep that by coincidence we’re going to set h1 damn my hands are not in the chasten plight the keyboard typeface – family is source sans Pro font heavines is 300 and the typeface immensity we want to be a little bit big so 3e m and then padding top we’ll choose something like 325 pixels so let’s go back and refresh that and there we go pretty simple all right so now let’s focus on this area we sacrificed that a the Container 12 class and ID which was scroll so we need to push things down work with that a little bit all right so scroll margin-top we’ll try 200 pixels perimeter sole 200 or you could just do a single boundary call no big deal a text-align: center we want to get this thing centered up and then this invoke the actual personas so scroll IMG and we’re going to give them plight: relative all right so let’s refresh this alright so we text align we mean be centered and they are sentiment relative so if we performed them what we’ll do when you have a position relative basically allows them to overlap one another by exerting negative boundaries so you’ll see how that works somewhat simply so right now you know you fresh it good-for-nothing happens nothing’s animate so that’s where we’re going to start it on here so let’s I go ahead and create a class here we’re going to call animate and this is going to be the confusing nonsense if you’ve never certainly shambled around with this stuff so we’re going to framed transition to s 4 seconds simplicity hasten and dash out all right now when it comes to different browsers you have to add you have to like basically replicate this these a duet occasions so oops so you mostly from Mozilla you have – Mose then you have – WebKit and that are able to only rest assured that these all will work on multiple browsers patently the older browsers it’s not going to work at all because it doesn’t buoy animation but anyhow um so that’s our first thing that we need to add and then what we want to do is add WebKit – animation – Phil – mo that’s ridiculous for commands that constructs it stay on the last enclose paste that just doing what we did up there and then one more WebKit – animation – duration 1′ s all right and so then what we want to do we want to add phone dot animate and put in transform translate 5e M comma 0 alright so basically what this wants is it’s going to move it either up or down based your wherever it’s at from its default berth before this animate class gets added with jQuery so this is I basically the horizontal left to right and then this is top or bottom so we’re not going to have it move up or down we’re going to have it move over by five all right so of course we have to do the same thing as in the top section alright and go ahead and emulate that all right so this is tablet we’re not actually having the when you have the monitor moving that’s not going to be move at all because it’s in a midst but the invoice the tablet is alright so this is going to be this going to move over by negative 10 so that intends she’s going to move left or from left from right to left so is taking this imitate that alright so still if we look at the actual site we’ll see that you know nothing enlivens more and that’s where jQuery comes in so let’s come out here and get our write j/ s out and very first thing that we have to positioned which is what I throw in every jQuery document when you start out all the code goes inside this so if it examines confusing don’t worry really mostly it impels it implement whatever coding you need for jQuery so all right so what procreates this function we’re going to applied a opening ringlet perform incident all right and we’re going to close that right here with the semicolon and we’ll go inside of it we’re going to positioned var as a variable we’re declaring a variable y equals this oops scroll top and then here’s where we supplement our actual if testimony if Y is greater than or equal to 300 then inside here is what should happen so we’ll settled oh yeah the monitor is not animating so why okay so it would be phone compute class as in CSS class animate oops all right take this paste it and make this tablet and save it so now let’s see what happens I know it’s not going to be correct but let’s just refresh this all right that’s pretty good except this is behind that so the lane you choose that is with a CSS property announced Z and X so we have to find oh yeah I don’t think we put it there so it’s just phone Z index – there we go all right so now refresh this you’ll see that they come into place and if you wanted to you know maybe start a little later then what you do is change let me get this out of now perhaps – 400 there you go pretty simple so if you crave well responsive there’s some additional drive that it is necessary to do so you’ll see if we bringing this in we have some issues all right so here’s what we need to do to fix that mostly we need to scale those images down on the various viewport width so if we go to 1140 CSS we can come over here we’ll hear these media inquiries and it’s mostly saying that if the viewport extent is within 960 by the minimum thicknes it’s 960 in the max width it wicks that thicknes is 1160 then execute this CSS alright so the one that we want to concern ourselves with the first one is down now where it’s 768 in between 959 all right so I’m going to exactly look in off-screen because I once have the CSS when I did this previously so mostly what we need to do is adjust the width the width and the height of each of those so we’ll take the check firstly and we go to photoshop and we find the monitor yeah it’s right there go to image image size it’ll let in specify percentage over here if we make this down by I guess the 60% yeah it tells you what the new dimensions are 361 by 236 so that’s what we want to put in there so we need to do that for each of the other ones so let me get that out now I’m not getting the privilege window up there it is okay and what I’m going to do is just glue that in alright I once have this typed out and so you need to do that for the the actual tablet and the phone alright so I once typed this out or and you know what it is so I’m just going to paste these in here these are these values I time repeated that process three times just seeing what they are at 60% so if you save this and now we’ll drag this in and by the way if strike ensure transformation and I it’ll bring up this little developer tools here in chrome the person Firefox has the same thing I basically move this off-screen when I move this around it tells us our thicknes right here so the viewport diameter now if we refresh this you’ll see that it’s scaled down and it not works now we have to do this one more time though which is kind of frustrating but I if we come back here well let me take this up now and well actually I’m not going to copy that actually let me yeah it’s this one right here for max extent 767 so anything that’s within that is going to get executed here so I I basically did that same process with Photoshop except instead of being 60% I moved it 30 so these are these values for that so now everything’s a lot smaller now so let me get it down to a smaller viewport diameter try like around for 12 or so and you’ll see now that these encourage properly in there like fault you know over up and down now you really notice one issue is they animate too much because it’s smaller but it’s still kind of rendering everything I based on that translation that we did so what we can do to fix that is take our yeah this one right here I am I looking at here yeah these two copy those we’ll go back up to our first yeah right here merely underneath and adhesive those and this is where you can decrease the amount that they are basically moving over so three three and then for the tablet we’ll try maybe negative six and when I did this before the it wasn’t executing this so what I had to do is add important at the end of each one of these all right and then copy this take it down adhesive it in and these values are also slightly different one one one and negative three all right and save that all right so now we’ll see that it doesn’t no longer the you know it was going in a lot further and then we’ll come down here sorry my recording work stopped because I was running out of space but mostly yeah now this works correctly I at running viewport diameter so that will work on you know like a tablet or an actual smartphone check out this over here immense alright so that is it for this tutorial now you can know how to extremely you know you can get so much more elaborate you can happen even computed keyframes I which would enable you to basically control the animation through different stages throughout the length of the actual animation and then you can also do so many different types you can manufacture these develop in sizing you can flip them it is therefore really opens up the door to experiment but of course also you want to be kind of republican you don’t want to overdo the animation it can become some telephones and inventions lagging any of your computers if you’re overdoing it too much so I yeah just something to be wary of all right so I’m Garry Simon of design direction comm check out pattern direction if you haven’t yet and subscribe here of course on YouTube alright I’ll see you tomorrow you
