This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Exercise 6: Falling up the Hole" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Rachel Nabors: We're going to have some fun using skrollr JS. I'm gonna show you how exactly it works before I let you do this project. Because there's a really neat trick to it. What I want you to do in this one is I want you to get the cat, cuz originally tuna was a part of this.
[00:00:21] Tuna is part of all my projects. Originally tuna was gonna play the Cheshire cat and you can see tuna sitting here but he was gonna be down on the underneath the screen. He was gonna be tucked out of way and as you scrolled her down, he was gonna fall upwards.
[00:00:34] And then he was gonna, kinda grind at her and then keep moving up toward the top of the page and disappear same way same way she disappear underneath. So, I've left the code that gets her to change but I'm gonna let you do the same thing to him.
[00:00:49] This is all in JavaScript. So, what you'll notice is that we've got, this is how skrollr works. It uses CSS properties. This is a more dynamic kind of animation. In that, it's not CSS animation. It's CSS properties being changed with JavaScript. So what we do is we set these data attributes with how far it is from the top of the page.
[00:01:15] I actually had to use waypoints to make this more responsive, because the whole thing is responsive. So the distance from the top of the page, the very top of the page, changes depending on how big your browser is. So for the live version, I'm actually using waypoints to change these data attributes every time you resize the page but, anyway that's a long story.
[00:01:36] So, this one is fixed distance from height of top. We basically set top to -10%. So Alice's value is to be at -10% from the top of the page when we're at zero. And then 6124 is the bottom of the page, that's how tall this page is. It's 6,124 pixels tall.
[00:02:01] By the time we get down there, her top value should be equal to 80%. So watch what happens when we scroll. You can see that we're starting with top at 10%. And when we start scrolling, notice how it's turning purple as it's updating? Skrollr is interpolating between these two different values until we reach the bottom.
[00:02:25] Word's very close to 80%. I'm not exactly sure why it's not perfectly there but you get the impression that that's how it works. I'm gonna give you the chance to do that with Tuna as a fun exercise. Special bonus points if you can investigate the code a little bit and do some sleuthing and see if you can make tuna turn into the treasure cat.
[00:02:50] Waypoints is also running on this page to change her attitude. You can see that notice the body class up here is also changing. It goes from curious to bored to sleeping and she, if we inspect her element,
>> Rachel Nabors: Come on, there. We inspect her element.
>> Rachel Nabors: That's so many.
[00:03:24]
>> Rachel Nabors: Here it is. If we inspect her element, we can see that, notice it's got weird here, body class of weird, here's the selector weird alice-falling. Background-position, 0 0. But if we change it, it goes, the background-position changes as well.
>> Rachel Nabors: You could technically, you could use this to trigger these different moods to trigger something changing on tuna as he's also scoped within that body.
[00:03:54] You could. So, those are all the hints I can give you right now. This one's kind of a big deal. So I'm gonna give you extra time.