Cyber Monday Sale Save up to 40% off unlimited courses, tutorials and creative assets. Cyber Monday Sale! Save Now
by
Lessons:26Length:3.5 hours
  • Overview
  • Transcript

4.8 Animating the Shuttle

Hello, and welcome back to Scroll Events Made Easy. In this lesson, we're going to finish up our scrolling animations by tackling the shuttle. So, I'm going to jump back into Brackets and we're now working in the site16 folder. And then, our images folder, we have our shuttle which we've already linked to in our HTML. So, if we scroll down here, we can see that it's just commented out right now. So, if we turn that comment off and save our page, jump back into Chrome and refresh, then we can see our shuttle, problem is it's there the whole time and obviously, we don't want it there the whole time. And, we also wanna re-position it, I don't want it there at the top left corner. Now, I'm eventually gonna be animating it from the bottom all the way past the top. So, we're not gonna see it for very long, so its vertical positioning is okay, but really, I'm just concerned about moving it over a little bit from the left-hand side, so, I'm gonna go into Brackets. We'll go into our main.css file, and in our HTML, I should point out we gave this div a class of shuttle. So, we're gonna be pointing to that class now. So, we'll skip a couple lines here. I'm gonna point to .shuttle and I'm just going to give it some left margins. So, let's say, margin-left, 10 pixels just to get it away from the edge a little bit. So, we'll do that, refresh, and that moves it over, maybe a little more than that. Let's do 20 pixels, and that looks pretty good. So again, the vertical positioning doesn't matter so much, cuz it's gonna start off below the screen, and it's gonna end up above the screen. But, at least we've got it nudged over a little bit, so it's not right up against the left edge of the screen now. So, now all that's left to do is animate it. So, we're going to jump back into Brackets, go to our html file, find our shuttle div and create our data attributes. This is really gonna be easy. Now, I don't want animation occur at the exact same time as everything else. I don't want it to start and end when the slide itself starts and ends, when the starry background starts and ends. I want it to be a little bit delayed, so I want the stars and the text to start animating in first, and then after a little bit of a delay, we'll start the space shuttle animating. And again, it's gonna animate from below the browser window all the way up to above the browser window. So, we're only gonna see it for a short time before it animates off. So, we're gonna start by giving it a data and the our last animation started at 2000 and we're gonna delay this one a little bit, so we'll give it an attribute of data-2500. And here, I'm gonna set the top position and this is the starting position of the animation to 100%. So, it will by default be off the stage down below the screen. Then, we're going to create and I'm gonna start off by setting it to data-3000 and we're gonna see a problem with it. But we're going to end it at the same time that our other animation ends for now. And, we're just going to set our top value here to 0%. So, let's save that, scroll back up to the top of our page and refresh. And, we see that it is gone by default now. So, let's scroll down and watch our animations. So, it starts to fade in, and then the animation happens here. And, I think I did it wrong. Yeah, we don't 0%, we need -100%. We want it to go all the way past the top edge. So, we'll save that, and try again, let's refresh the page, and we'll search scrolling down, and there we go. So, the problem we have here is, unless we scroll very slowly, that animation is just happening, excuse me, way too quickly. So, it almost happens too fast to really even see what it is that's moving up. So, I'm going to extend that animation out a little bit another 1000 pixels. So, we're gonna change it from data-3000 to data-4000. And that way, it will take a whole extra second to get where it's going. So, we're gonna save that, scroll up and refresh. It won't scroll all the way up to the top, but here we go. And there we go, that animation happens a little bit slower now, so we can actually see what's going on there. So, that wraps it up for our basic animations and with all three of these projects, we've been really fortunate in that we haven't had to use any JavaScript at all except for one line here and there to initialize the frameworks that we're using. So, if you really don't like JavaScript, this is probably a good place for you to stop. However, in the next section, I wanna jump in and kind of create a little bonus section where we can create some navigation buttons for this particular page. And these navigation buttons are going to use JavaScript and jQuery to automate these animations, we're basically gonna have a next and a previous button. And, we're gonna be able to click on those buttons and watch the scroll bar move by itself. And, we're gonna to that using JavaScript, so, if you really don't like using JavaScript, and if you took me for my word that we weren't gonna be using any JavaScript in this course, then you might wanna go ahead and stop here. However, if you want to challenge yourself, I want to highly encourage you to move forward to the next section and we'll take a look at how to create some buttons that will animate the scroll bar for us. So, thank you for watching and I'll see you in the next section.

Back to the top