FREELessons: 26Length: 3.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.3 Filling Out the Content

Hello and welcome back to Scroll Events Made Easy. I've made a copy of our site09 folder. If you remember the site10 folder is the stand alone folder with the demo that we talked about in the last lesson. The site09 folder is the one that actually has a skeleton for our site in it. And I've made a copy of that and renamed it site11. So all the changes we make in this lesson will be save there in site11 folder, and if you open that up in brackets. So, so far what we have inside our body is this script tags that we're gonna need, and now we're gonna fill out some of our content. Since we're gonna be animating the background color, I'm not gonna leave that to the body, I gonna create a new div for that. And I'm gonna give this a class of fixed-bg, it'll be fixed in place. And for now, I'm just gonna leave that as an empty div. We'll add the data attributes we need later on, in order to create the animations that we need. But let's go ahead and style it, so that we fill the screen with it, fix it in place, and give it a background color. So one thing we could do, is we could go ahead and get a data. 0 attribute, which is the attribute that will initially be triggered when our page loads. Because we'll automatically be scrolled to the top. And inside that, we're going to give it a background color. And we're gonna give it an RGB value, remember if you're going to animate the background color using Skrollr.js, we need to use an RGB value instead of a HEX value and I'm gonna give a value of 112, 188 these are separated by commas and 32. So those are initial background color. And let's bring this closing angle bracket up here, and we'll nudge the closing div tag down. And bring it over. Again, the tabs are going crazy here, but there we go. Okay, so we have our background div. Now, let's create the CSS fort. So I'm gonna create a new folder. In our site, and we'll call it css and I did not mean to put that in the JavaScript folder, so let's just delete that and we'll create it inside site11, so we'll just come up here and right click. Maybe you just gotta make sure you right click outside of everything. There you go. New folder css. There we go. So we create a new file inside the css folder called main.css and we'll get started with our fixed-bg class, which is the class that we gave to our background element. So since this is going to be fixed in place and not scrolling, we'll just set our position equal to fixed, and then we want it to take up 100% of the width. So we'll set width to 100% and we're also gonna set the height to 100%. Now, initially we're gonna see that this isn't gonna work. Let's go ahead and save this and jump back into our HTML, and let's point to that file here, actually you can put it in the head of your document or at the bottom. I'm going to put it in the head. So we'll put our link rel=stylesheet and we'll set our href=css/main.css. Here we go and let's save that, and then jump into our browser and refresh. And sure enough, there's still no background color there and one of the reasons is, by default this data 0 attribute doesn't really do anything for us, unless we've actually initialized Scroller.js which we haven't done. By default, HTML doesn't know it, data zero is. We have to rely on skrollr.js for that. So let's create another script tag below this. And this is going to look similar to what we've done before. I'm going to create a variable called s, and we're gonna set it equal to skrollr.init. So, that looks a little bit similar to the way wildjs worked, but that's really all we need to do to get it to start recognizing all of our data attributes and start animating. So, let's save our file again. And jump back into our browser, and now refresh. And initially, we don't see anything, but we can tell that scroll is working if we try to move the scroll wheel, and you'll see that the background color does show up there. However, if we jump back into our code and then add another data attribute here, let's just say, at data-1000. We wanna change that background color, just like we've done before. We're gonna set it to an rgb value. Of 50, 50, 50, so kind of a medium dark gray, and then we'll close that off. If we do that now, save it, and then jump back into our browser and refresh the page, you'll see that it does load up by default. So those key frames that you create are not gonna trigger if you only create one of those key frames. You actually need to create a starting and ending key frame or a starting and ending data attribute as we did here. Once we create both of those, you'll see that everything loads fine. Now, we've still got some default margins and padding inside the body of the document. So, we can get rid of that. But, we can now scroll down and see that our background is changing colors just fine. So, let's jump back into our code. And in our css, let's go into main.css, and just above fixed-bg, I want to, first of all, set the Box sizing attribute for everything to border-box. That way, whenever we set the width and height of something, that will be the final width and height after all borders and padding's are added. So we'll set that for everything, and then we'll also point to our HTML element and our body element and we'll set the height of those to 100%, and then we'll also set the font family. I don't like the default serif font, so I'm just gonna change it to something simple like, arial, sans-serif for our font and then for the body itself, I'm just gonna turn of margin and padding. I will set margin to zero and padding to zero. And that should give closer to where we wanna be, so let's jump back into our browser and there wanna go. So now, we can scroll up and down see our background changing color. And now the background takes up the entire width and height. Very good. So let's jump back in to our code, and we'll jump into our HTML file, and we have our background div here. And we can go ahead and label that if we wish, and we'll just put a comment here that says, background. Just so, it's a little bit easier to read our code, and then let's create our first slide. So as I've mentioned before, this is going to be in kind of a slide show format, where you have one slide that has a certain background, some text on it. It's gonna animate on and off in its on way, and then we'll go down to the next slide. And so, we're gonna put these inside section elements and we'll call this first one Slide01, so we'll give it an ID of slide01, and I'm also going to give it a class of slide. And we're going to create some css for these slides, a little bit later. But for now, I just want to create the content, so there's our section. Inside that section I'm going to create a div with a class of slide content, so that we can style the content inside these slides, and for this one I'm going to put an h2 inside it, we'll put some text inside that, so we have a nice little header, Scroll Effects with skrollr.js, and then we might have a paragraph here with some lorem text. So again, this lorem thing is a plug in. But it works really well. So that's our first slide, I'm just gonna copy this, skip a couple of lines and paste it and we'll change it a little bit. This will be slide02. We're gonna leave the class of slide here, the class of slide content here and this one will animate in from the right. So we'll just change the title here to enter Stage Right. And then, as we animate in our third slide, as we saw in our demo, we're going to, what appears to be narrowing the margins of the page. We're gonna bring in the sides of the page, so that it looks like we have some white margins on the side. And we're actually gonna do that using borders. But let's go ahead and create another section for that. And we'll do everything we need to do to create the animations or transitions later, but for now, let's just make another copy of that. We're gonna call this slide03, and then inside the h2 for the slide content, I'm just gonna say, Narrow the Margins. And we'll just leave the same text in there, and then for our fourth slide, we're just gonna paste that again, we're gonna rename it slide04 and we're gonna put some more text here. The Possibilities are Endless. Now we're also going to have a space shuttle that animates over the content here for slide04, but I'm going to go ahead and create it outside of this section, we'll just create another div here. I'm gonna give this a class of shuttle but I'm also going to give it a class of slide, because the CSS rules that we apply to the other slides, we're going to apply to this one as well. And then inside that div, we're going to create an image and set the source equal to go into or img folder to shuttle.png and we can put an old attribute if we want to, if we want our HTML validators to stop complaining and there we go. So I haven't put the start image on here. The start image is actually gonna be a background image, but that should take care of our content for now. So we can save our index.html file, jump into our browser and refresh. And we now have some content. Now, we have a little bit of a problem in that our content is invisible. Or it's basically appearing behind our background div. Because remember our background div has fixed positioning applied to it. And by default, that's going to cover up all the text. We can see up here, there's a little bit of a gap in the top, and everything is showing up there. But if we go back into brackets, I'm gonna go to our css. And the first thing I'm gonna do is set the top position for this fixed-bg to zero. Save that, jump back into our page. And refresh, there we go. Now, it's covering up all the text. So in order to get our text to show up, all we need to do is make those slides relative, give them relative positioning. So we'll start by creating a rule for the slide class that we made, and we're gonna give it a position attribute and set it to relative. So if we save that and refresh, that should take care of it. And so, we can scroll up and down and see all of our content there. Now, again each of these slides is going to take up a full screen. Things are going to look different as animate from slide to slide. We're gonna have the background color changing, we're gonna have things animating in and out, we're gonna have the margins narrowing etc., etc. So we'll see numerous things happen as we move through the slide show, but we'll get to that in the next lesson. Thank you for watching and I'll see you then.

Back to the top