7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 13Length: 2.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.8 Horizontal Smooth Scrolling Picture Book

Hi, and welcome back to 10 CSS 3 Branding and Presentation Projects. In this project, you're gonna be creating a horizontal smooth scrolling picture book. Now to get started, you can the base pen for this project. Look in the related links section below this video and you'll find the link there. You can fork that into your current open account. Our horizontal picture book is gonna be split up into five pages. For each of our five pages we'll need a div, like this, with the class section, and then a unique id. For our first section we're gonna add in both text and images. So we have one div with the class images and we have these three images inside it. And then underneath that we have a div with a class text. And that's holding the text for our first page. Now, we want each of our pages to be contained within whatever screen size is available. We don't want any vertical overflow. So to start getting that working, we'll first set our section class to be a width of 100% and a height of 100vh. Vh is a view port relative unit, it stands for view port height, so this means that the height of a section should be 100% of the view port height. Right now, we still have some overflow, because we need to tweak our layout a little bit more, and to make that happen, we're gonna to get our three images set up so they all sit side by side in a row. So there's our three images, all side by side. The way we're making that work is with flexbox. So the images class is applied to the div that is wrapping all of our images, and then we've applied display flex to that container class. Then, image is the class that is applying to the div that surrounds each of these individual images. And there, we have the width of that div set to 33.33%, so that's making sure that each one of those divs is approximately a third of the overall width of the parent element, and then because we're using display flex, flexbox is taking care of just putting each of these side by side. Then, inside this image class element, we're applying some styling directly to the images themselves. We're telling them to take a width of 100%, so that makes sure that they fit snugly inside that one-third width parent div. We're setting now height to border, so that they retain their aspect ratio. And we're setting their display to plot to make sure that all of those lines of layout code that we just put in apply as we intend them to. Now, we're gonna format the text that we have down here. Here we have a few things that we've just done. Firstly, we've added some padding, so that our text isn't flush around the edges. And then we've used column count three. So that has just automatically split our page one text into thirds. Then, we've set the margin top of the first paragraph in our text here to zero, because we have a heading directly above that text. So we don't need to have any extra space above this paragraph, so we've just zeroed that out. And then we've also created a drop cap, and we've done that with these selectors. So first, we've found the first paragraph in this text class div, and then inside that first paragraph, we've found the first letter. And we've then bumped that font size up to 1.5em. And then finally, we've set the margin for the h1 element to 0. That's the essentials for our first page and for our sections styling. Now, we're gonna put in the remaining four pages into our HTML. So just below our first section, we're gonna add in another four sections. And each one of these is marked up in exactly the same way. We always have a div, the class section, and the unique id, and then the content for that section is placed inside of those tags. Right now, our content is just running vertically, which is, of course, the default for. So now we're gonna change things up, so that you can run horizontally instead. We have five pages, each one of them 100% width. So we're gonna change our body tag, so that the width is 500%. Now, you will need to know how many pages you wanna have in a layout like this, because you must have the width set to the number of pages you have times 100%. Now, we're gonna make each of our sections, our pages, run from left to right, by making our wrapper class div, that is surrounding all of our other HTML, a flexbox container. So we'll add in this CSS. And now, if you scroll across, we've got each one of our pages going from left to right. So looking at what we've done, we have set our height to 100% of the viewport height and our width to be automatic, so that it will just stretch to accommodate the pages that are inside this div. Then, we've set the display type to flex to activate flexbox, and we have flex direction set to row. And that means, that any of the child elements inside this container are gonna be set from left to right rather than from top to bottom. And then, this is how we are making our layout work. We're setting flex-wrap to nowrap. And what that means is no matter how many children there are inside this container element, never ever wrap them onto a line below. Just keep stretching them out horizontally as far as you need to go. And then finally, we've set our line items to flex-start, which just aligns all the children elements inside this element to the top of the screen. Now, you will have noticed that in our second and fourth sections, our images are looking a little bit tiny and sorry for themselves. They're not properly sized, and they're not properly aligned. So we're gonna add in some code to fix that up. So we're targeting the ids of our second and fourth pages. And then, we're targeting the images inside those. We're setting their width to be exactly 100% of the view port width, and their height to be auto, so that they keep the correct aspect ratio. And then we're using flexbox again. We're setting the parent divs that are surrounding these images to display flex, and then we're using align item center. And that's the easiest possible way right now to vertically center something. And now when we look at our images again there we go, and they just puff themselves up to be a full sized illustration, and they've also vertically centered themselves in the screen. Now, we're ready to add in the pagination that's gonna allow us to smoothly scroll from one page to the next. I'm gonna start by adding in this HTML at the very top of your HTML. And now what we have added here, this is our visible pagination. You can see these numbers that we'll start on shortly, one, two, three, four, five. And each one of those links is linking through to an internal anchor. So we're going to id one, id two, and so on. This is where it gets interesting. If you recall, when we created each of our sections, we gave them an id. So we have id one on our first section. What we've also just done is added a bunch of empty divs up here that also have the same ids. So when you click this link here with the id of one as its destination, it's actually going to target both of these divs. This div here with the content inside it, and this div up here that has nothing inside it. Now this does two things for us. Not only when you click a link to an internal anchor, the whole page is gonna move to take you to wherever that anchor begins. But, because we have two things that are being targeted, the browser's not gonna know which one you want to scroll to, so it's just not gonna move at all. Then that puts control of the movement of the page back into our hands. The second thing it allows us to do is use CSS selectors to find the wrapper div and the section divs, so that we can move them all from left to right when we set up our horizontal scrolling. Now, right now, you can only use CSS selectors to find child elements, or to find elements that come after the one that you're currently targeting. So by putting these empty divs right at the top of our HTML, we make sure that we are gonna be able to target those divs, and then find divs that come after them in our HTML. Now, if that doesn't make full sense, don't worry because you're about to see it all working in a practical manner, and then it will become a lot clearer. So on to the CSS that's gonna make that all work. First, we'll just put a little styling onto the pagination that we just added in. So we'll hide all of those empty divs. We'll just remove them from the document flow, and then we've just added some background colors, and some just general styling to our page links up here. And now, we're gonna add the code that's gonna make our links navigate us from one page to the next. All right, so first, we're looking for any time that with the class slide switch, so that's these ones up here. That has an id with a value of one, so this word, pick out this div here, anytime that this div is the target, and that will be the case whenever we click this first link here. Then this symbol tells the browser to find all the divs with the class wrapper that come after it, and then all of the divs with the class section that come after that. Then when it finds those divs it sets this transform, setting a translateX value to 0. Now you recall from other projects that we've done, that translateX is shifting something along the horizontal axis. So we have translateX(0) for our first page saying don't move it at all. For our second page, we're saying translateX(-100%). So that's gonna shift our pages along to the right by the width of one page, and then we're increasing the width of our translateX movement by 100% each time. And that is gonna shift our display the correct amount to make the targeted page visible. Okay, so let's see that working. There's page 2, page 3, page 4, and page 5. And you can switch between any page in any order that you like. The one thing that we're still missing is that smooth scrolling. We can have the transition between pages happen by smooth scrolling by adding a little code to our section class. So we've set a transform as the default on all of our sections of translateX(0). And then, we've set a transition to say that any time a default transform is changed, it should be done with a transition over a period of 0.6 seconds with an ease-in-out animation timing function. So let's test that out. There we go, smooth scrolling from one page to the next in any order that you like. We have a couple of finishing touches to add now. Firstly, we wanna get rid of the scroll bars, cuz we want this to be the only navigation method. So we'll set the height of our body element to 100vh, and overflow to hidden, so now that's gotten rid of those scroll bars. We also want the page number in our navigation to change depending on which page is currently active. We see the same syntax with this code here that we did with the code above that we used to do our translateX values. Only this time we're using it to find the pagination number that needs to have its color changed. And so we've set up this targeting for each one of our pages, and then we've just changed the color value. So now, we get a different color to show us which page that we're currently on. And then finally, because we need to make sure that our pages can always fit within the viewport, we need to add some responsive functionality. So we're gonna start with the body tag, and we're gonna set our font size to a viewport relative unit. So we have a font size of 2.38vh. So that means that the font size is gonna change, depending on the height of the viewport. So if you have less height, your font size is gonna be smaller, and if you have more height, your font is gonna be bigger. Next up, we're gonna add some media queries. Now, these media queries might be different to those you've worked before, because you'll notice that our media queries are not dependent on the width of the screen. Because even if we know the width of the screen that's not gonna be enough information for us to make sure that the layout will work. So what we're doing instead, is we're looking at aspect ratio. Now, the first thing that we're gonna do is when the aspect ratio drops down below a ratio of 10 to 7, then we're gonna change the font size on our body tag to a width based font size instead of a height based font size. And we're gonna drop our text columns down to one. So if you watch, you'll see this happen. See, there you go. And then, we have several extra media queries as our aspect ratio continues to decrease. That continue to increase the size of our font, so that no matter what amount of space we have in our viewport, it's always gonna work. So if we keep shrinking down, you'll see that our font size keeps bumping up. So that we always have a good feel of the available page area. So now, you should have a fully complete, no JavaScript, smooth scrolling horizontal picture book. And we'd love to see your work. Please tweet us your finished pen to #10CSS3projects. In the next project, you're gonna be creating a PowerPoint-like presentation using just CSS3. I'll see you there.

Back to the top