This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Exercise 5 Solution" Lesson
>> Rachel Nabors: So going into the editor view, what's happening here is we've got a stage. We have this lovely piece of HTML with the ID of stage that we get to latch on to. And it contains a loader. And it contains a scene with tuna sitting in the window.
>> Rachel Nabors: Specifically we want to change the scene. We want to remove the class that's on it when it loads which is loading. And we want to swap in a class of loaded on that stage element. The other thing we want to do, actually let me show you how to do this first.
[00:00:47] So I hope I won't regret removing my own notes. We're gonna go after stage, and we're gonna remove
>> Rachel Nabors: loading, and we are going to addClass.
>> Rachel Nabors: That's an unfortunate line break. We're gonna add the class of loaded. And we're going to do that with a 6. We've got it on a set time out here.
[00:01:24] So it will wait for six seconds in because we want people to see how fancy our loader is. Now you notice that it just jumped cut right. I'm gonna shorten the load time here. I just love seeing loaders that are set with set time outs. It's always an indication of terrible, [LAUGH] terrible performance.
[00:01:43] So no, the user must see our pretty loader. We spent a lot of time on this loader. They are gonna see it. Use loaders to hide loading. Don't use them to show off your pretty design skills. I know they're pretty. Everyone thinks they're pretty. But it's gotta have more reason.
[00:01:59] So you'll notice that there's a jump cut here. Remember how I said that the nice thing about transitions is now if they're not supported, we just get some jump cuts. Well, we're about to change that. See, loader and scene, they both have their opacity scoped by these classes.
[00:02:14] So when things are loaded, the loader has an opacity of 0. When things are loading, the scene has an opacity of 0, the window scene that is. What we're gonna do is we are gonna set a transition on that opacity.
>> Rachel Nabors: So that instead of a jump cut, we're gonna get a nice fade, a crossfade.
[00:03:01] I use this for projects like Black Brick Road. I'm gonna actually demo this one in person. This is pretty darn awesome.
>> Rachel Nabors: So this is the loader. As you can see, the loader just stands here and looks at us until it's done loading. The only animation is little dots.
[00:03:23] Go step, step, step, step, step. This was a project I worked on with a lovely Russian cartoonist. And notice that when we click the arrow to go down, the class on the body actually changes. Or maybe it's using data attribute. So you can use data attributes with CSS too.
[00:03:39] If you wanna store state in data attributes on an element that also makes sense, whatever you're more comfortable with, whatever your company's team approves of as a best practice. But notice that these states are like upstairs and downstairs. And they're just changing this whole block. This whole room is a big element.
[00:04:00] And its transform is changing where it's positioned. So the transition is set to transform. Same here, menu open, menu closed, with transitions dictating when that class is on the page, where this should be. Well, the transition dictates how it should change. So for instance when the body has a class of menu open, the menu is front in center.
[00:04:27] When the body has a class of menu closed, the menu is offscreen. And the transition on menu says we want it to move by two seconds.
>> Rachel Nabors: So that's that state in classes. So I tried doing this on a project, a pet project with a client. The project didn't go too far.
[00:04:51] But the idea was to recreate a Tamagotchi using, in the browser. So basically you can feed me. This is all CSS animation and sprites we played with. So you can get me to sleep. And you'll notice on the top, there are these little bars indicating how alert, how hungry, and how engaged I am.
[00:05:15] That's not what I want. Darn it, go back, there we go. So, as we go through this, we can see that the bars are changing in reaction, the bars are changing in reaction to these buttons that you're clicking. But they're also changing the classes on the page, to change her expression.
[00:06:40] You should not use parallax without the supervision of a trained UX expert so that you're not hurting the poor users cuz parallax is kind of a trite thing. And it can be discombobulating for people with vestibular disorders. But for this Blue Sky Project I did with Adobe, it made sense.
[00:07:19] I'm actually using a library called waypoints.js to decipher which one of the screens is in view at any time and just from the animations and transitions on those screens when they're in view. So now when we scroll down, as we scroll down, I'm also letting the browser know what state of mind she should be in.
[00:07:58] So let's talk about those libraries that I used. For the parallax, I use Skrollr. It's kind of the big heavy weight in the industry as far as parallax goes. If you ever wanna use parallax, Skrollr is not a bad idea. It basically interpolates property values based on scroll position.
[00:08:15] We will play with it, I promise. And Waypoints, Waypoints is my best friend. Waypoints can work with or without jQuery. It has a standalone library. The developer is in Portland where I live. And he is a really cool fellow. He's very eager to talk about Waypoints. So he's always responding to any questions you might have on the GitHub.
[00:08:38] But an idea of how Waypoints works is, notice as I scroll down the site, different things are being triggered by how far you are from the top of the screen. It's a really handy library for figuring out where a person is on the screen at any given time.