Chào mừng bạn đến với TUTUAPP

Build-In Load Animation

hey I’m Travis and this is Deb tips everywhere that you look it’s all dev tips all of it ah this is the last video in the CSS animation series I know what you mean right but we’ve looked at spinners menus modal’s we’ve looked at a lot of stuff and today we’re going to talk about how to animate a page how to build a page do animation build in something like this you see that that cool stuff they’re doing there the page builds as it loads and it’s kind of fun right so we’re going to be doing that now everywhere here we are in code pen again isn’t that fantastic that means you can go right to wherever this code pen is and see all the code for yourself there is a link in the description below but before you go and running off and diving in the deep end why don’t we just go look at the the mark-up together right okay so first of all this is Jade and if you want to see what Jade looks like when it’s written in HTML you can just go compile view the compiled HTML here in this will show you basically we have a like a container I closed it a container and a bunch of div items here okay so that’s what kind of this is here we’re saying we want 19 of these objects and there’s 19 of these squares here and they’re all different shapes and sizes and you can see in the CSS section how we accomplish that these things are basically the frame here’s the grid and then this is the item these are the items here and then I went through and did my old one two three four and all the way through nineteen and these are all URLs of some dribble posts if your see you know like you like that squid or that dog or something here and you think oh I want to know where this lemon came from go over here and find the one and then you know just do a search for that or whatever on dribble and you’ll be able to find out who and where and whatever um so all credit goes to the perspective creators of this art I’m just using it as something nicer to look at then squared great boxes now to get the different size is I did like weird little you know equations with the end child and randomly not randomly but like I you know try to make it feel random the different heights so we have some of them are 50 pixels some of them are 120 and some of them are 300 pixels tall but it kind of all works out to make this nice kind of like looking thing and then I have an area down here where we’re going to do our work today and where we’re going to start animating these things and then in this JavaScript section I am using jQuery masonry to make the grid all masonry like and that’s kind of like the the run through of that’s kind of the run through of this you know the code that we have here so what do we want to do let’s start off in the JavaScript so the whole point of this episode is to kind of look at like how can we when someone comes to our page like build the page or make it animate in or make it have like a surprise a wonderful pleasant moment when they first come to the website so what I want to do is I want to animate each one of these objects and you can think of this as like a portfolio or something and again all credit goes to the artists of these individual pieces because they are beautiful I just didn’t want to look at great boxes we could have we could have so what we want to do is want to animate each of these in one at a time and to animate that in one at a time we’re going to trigger them by adding a class to each element individually one at a time got it so it’s gonna be pretty fun we’re going to use some JavaScript to do that adding that class one at a time and we’re gonna do it with some good old JQ some good old jQuery a taim item item is the name of each one of these squares there there each class item and we’re going to use a good old fashioned jquery function called each now what what each does is it says for each item that is in this jQuery object so there should be 19 of these items run this function times okay what function you’re saying this one rear you didn’t see this one there that’s the one I wanted to run nineteen times okay so this function I can’t type and speak come on how do I get a caps lock in here okay yeah okay that that function nineteen times and to catalog the number of the loop that you’re on you’re going to put an eye right here this is going to be short for iterator it’s going to be a variable okay so what we need to do is we need to write the thing that we want to happen nineteen times which is finally again find those items so dollar quote dot item and again there’s nineteen of them so we need to narrow them down so I say EQ so this is jQuery equals which will narrow down the selection of nineteen because every time you do this right here this whole jQuery object is selecting all 19 of those items and this one will narrow down that selection to just one of them which number you want to use this eye right here because that’s the placeholder for the number of the iteration that you’re on and that comes from right there okay so if it’s through the fourth loop this number will be four and we’ll say choose the fourth one with me this is going to be there’s going to be that’s like the magic sauce basically right there what do we want to do we want to add a class Cass class of I think I said is visible is visible add that class now we don’t want all these functions right here to fire at the same time so we’re going to do a set time out and a set time out is a is a way that we can tell JavaScript to wait a little bit before we run the next thing right and then put in another this function that will fire automatically and going to cut that all right so now we’re going to wrap the thing that we wrote which selects the item and adds the class in an anonymous function so and also we have to say how long should we wait let’s say 200 mmm seconds for starters times I there’s that letter again there’s that placeholder again I that is a that is a number of what iterator you’re on so if you’re on number zero then this is going to be like don’t wait at all because two hundred times zero is zero and the point is that every time you’re going to go to the next one and next one it’s going to wait an additional 200 milliseconds that’s the whole point of this iterator right here and set timeout function 200 that that all looks pretty good so let’s do a hmm okay so you’re not seeing anything happen over here because the is visible class class may be added to those things but it doesn’t make any sense so we need to go over here and say well so what what happens when a is is visible and to just show you what I mean I’m going to put like a quick border bottom five pixels solid red on the is visible class now these all see how to get a border one at a time after this when this page is starting to refresh okay let me hit a thing here and make this one at a time and they’re numbered so you can see them happening you can follow like the red border going down here so this red border is kind of an example of that these things are getting the class is visible one at a time every 200 seconds 200 milliseconds the next one is getting its class now I have an animation a style already set to this class and I have the keyword items waiting 600 milliseconds but each one of these is having two most excellent so 200 milliseconds with an ease in and forwards so I’m going to set each item to a pace adizero okay and when I add the class is Vittel is visible let’s animate these things in with some keyframes okay at key for ramas items with a capital I don’t know why let’s say zero percent is going to be that’s not a zero zero percent is going to be opacity what zero right and then how do we animate this thing in whoa whoa whoa okay so that’s a quick way to do a quick fade in but like come on let’s be ridiculous now let’s just go back how can we make this stupid crazy weird stupid stupid like honestly some of these things that I do with you guys I would never like do in a real setting because they’re too gratuitous but it’s just like the whole point of this whole series is to learn how to do this stuff go big and go silly so that you can have some like ideas in your toolbox of what you could possibly do and I don’t recommend that you do all the things that we do I think I think we’re going to too crazy in this series like animation should be like done subtly and with purpose but it’s fun so let’s just do stuff all right why don’t we do a little bit of like transform of course and go classic scale and we’ll start it at 0.3 like small and they’ll have to zoom up right around right how about a rotate X 90 degrees so the flip up wow wow wow X I didn’t expect the X let’s do the Y so it’s like this okay but it feels like I’m kind of like hitting the wall how about um how about we do mm how about like 70% and then transform you know if I look like I’m sweating because I’m recording this in the middle of the day I usually record it like in the middle of the night but I need to go I’m gonna go on a date with my wife tonight I’m very excited about that but I need to get this done first so rotate why let’s say what am I trying to do right now okay so why don’t we make the scale go 1.4 so it’s popping up and going back whoa whoa whoa that’s too fast that’s too fast slow let’s go back to 600 mmm it’s mmm that feels really weird why are you taking so long oh because from 0% to 70% on remaining at rotation 9b so let’s take that off oh that’s fun it’s kind of like jumping out and landing quite nicely I wonder if I wonder if 90 percent can be like do another transform and make it go like oh I like that like like a bounce there we go like see how when they hit the the z space that’s supposed to feel like the backboard they go hmm it kind of bounce let me show you with it show that again boom so they in my opinion they fly up and they take too long how about this going to 60% ah this is fun I really like this one alright if this were any other day I’d stop it right there but you know what why don’t we just like make another one why don’t we change this to items 2 and make a new keyframe set let’s bring these guys in in a totally different way items 2 because I have great naming mm-hmm items to okay we’re going to start with 0 at not $0 0% this is and why don’t we do all right all right how about this yes I’m do bringing it with a fade of course that’s what I’ve been doing that’s they’re already faded out 10 percent 100 percent come on Oh pasted e1 okay classic opacity fade in good stuff can’t go wrong with a fade in let’s do height at come on high at 0% right here just start so now they’re like falling in do they look like they’re pausing a little bit how do i refresh this thing I guess I have to edit some code here line a code to make it refresh code been it looks like they’re like coming in and then scooting down is that right these I wonder if it’s the padding on see how the two is like floating in the middle of the air here that’s because there’s like some padding around this element and that’s kind of up here up here up here where are you padding 20 pixels so let’s go down to this transform keyframe and say padding:0 pixels that feels a lot more fluid you see us less choppy with the introduction of each element and it’s cool because you can see the number also float by how much oh that again huh isn’t that fun all right that’s it for today can you believe it we finished that is it for the CSS animations series right and I think we’ve learned some pretty valuable lessons mainly that CSS is pretty cool I’d like to thank the patrons of this channel if you think that getting these videos early having a dev tips chat and being a part of the community would be interesting to you visit patreon.com slash dev tips and learn more about the community we have around the channel next week we’re going to have a guest youtube video tutorial from ran who does the youtube channel called flex and he’s going to be showing us web flow and he’s going to be showing us how he uses this authoring tool this front-end authoring tool to make his websites and we also discussed the place that these kind of tools have in the web development economy now some people might see these web development authoring tools website authoring tools and they get scared like why am i learning Web Design if there’s a tool that can do it too well oh we’re talking about that next week it’s actually a pretty good discussion and that will happen after he spends a few minutes to show us how to use this tool until then be excellent to each other and keep on hacking

Leave a Reply

Your email address will not be published. Required fields are marked *