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.2 Data Attributes

Hello and welcome back to Scroll Events Made Easy. Now, as we work through the following explanation, you might start to think that maybe this isn't as easy as we thought. But, once we get a grasp on what we're gonna talk about here, the rest of this course, or the rest of this project, is gonna be really, really easy. It just takes a little bit of mental gymnastics to wrap your mind around what's going on here. Now, the good news is, we don't have to write any of our own JavaScript. We just need to include data attributes, but we really need to understand how those data attributes work. So, I've created another copy of our site09 folder and moved it to site10. But, I've made a bunch of changes in it. So, this isn't where we're going to pick up in the next lesson. In the next lesson, we're actually going to pick up with the site09 folder again. And we'll make a new copy of it and put it in site11. But for now, this site10 folder is kind of a stand alone folder that you're not gonna make any changes to, but I wanted you to have access to the code that we're about to look at. So, again, if we jump back to our browser, we can see this sample code. Obviously, it's nothing beautiful here. I just want to get a few ideas across. And so, as we can see on the right, as we click and scroll down on our scrollbar, we see that the background is animating. The color is animating. It's going from black to red. And, we see another animation taking place with our text here, the blue text at the bottom. So, you'll notice that the text stays blue, until the top of the text reaches the center of the browser window, and then it slowly starts animating to white. Once it reaches the top of the browser window, then it's white. So, there are two different types of data attributes we need to keep in mind here. One type of data attribute takes a look at how far we've scrolled the entire browser window, regardless of what element we're looking at, it's how far the browser window has been scrolled. So, as we scroll from the top of the document to the very bottom of the document, the background is changing from black to red. Now, that animation is happening on a specific element. It's happening on a div with a fixed position that's taking up the full width and height of the screen. So, that animation is happening on a specific element, but that animation is in relation to the scroll position of the browser. Now, the second type of data attribute we're going to be looking at, deals with the position of an element in relation to the browser. So, we're no longer looking at the absolute scroll position. Instead, we're looking at the scroll position of this element here in relation to the view port, in relation to what we can see on the screen. So, as we scroll this blue text up, once the top of the text gets to the center of the screen, the vertical center of the screen, we're gonna start the animation. And as we continue to scroll, once the top of that text reaches the top of the screen, we're gonna end that animation. So again, there's two different types of data attributes we're going to be looking at here. Again, the first one deals with the absolute scroll position of our document. How far up and down we've scrolled in the document. And, the other one is gonna be related to the scroll position but it's the position of an item or an element in our document in relation to the actual view port, what we can see on the screen. So, let's jump into our sample code and take a look. So, there's a bunch of CSS up here at the top, I don't want you to worry about that for now, we'll get into the CSS later on when we start building our project, but for now, I want you to take a look at these two elements. So, we have this one element here which is basically just our background. So, it's an empty div and it's got a class of fixed-bg and I've created some CSS to fix it in place and just stretch it across the width and height of the browser. But then, we have a couple of data attributes here. We have data-0 and data-1000. These two attributes are basically key frames in an animation. The data-0 attribute represents the start of the animation and the data-1000 attribute represents the end of the animation, unless we're scrolling back up. But, if we're scrolling back up, then it's the other way around. So, the number here really just represents the number of pixels that have been scrolled in the browser window. So again, this isn't in relation to any specific element, we're just saying that when that scroll bar has scrolled down from 0 to 1000, pixels we're gonna create this animation moving from black to red. Now, there's a number of other attributes like this which we'll take a look at in a second. But now I wanna show you the second type of data attribute that we're gonna be looking at. The second type is represented by this second div down here the second text div I should say. It's actually our third, or fourth div, depending on how you look at it. But, this div here has a couple of data attributes that look a little bit different. So, we have data-center-top and data-top-top, and for me, the easiest way to read these is from right to left. And the way I read these is when the top of this particular element, whatever element this data attribute is applied to. So, we're talking about this div right here, that contains all of our blue text that we saw before. When the top of this div, reaches the vertical center of our viewing area, then we're gonna start that animation. Before we reach that key frame, it's gonna stay at this value, it's gonna stay blue. But, once the top of this element reaches this center, the vertical center of our viewing area, we're gonna start this animation. And then, we have our second data attribute here which is our other key frame for our animation, which is saying that when the top of this element reaches the top of the browser window, our text is gonna be white. And the scroller js framework is going to interpolate between these two values. Now, one thing to keep in mind, is that if you're animating color, you've gotta use these rgb values. A hex value will not work in scroller.js. So, you need to make sure to use these rgb values. So again, we're animating, or we're gonna start the animation if we're scrolling our scrollbar down. We're gonna start the animation when the top of this div reaches the center of the browser, and then, we're gonna end the animation when the top of this element reaches the top of the browser which is why we're seeing what we're seeing here. So, as we scroll up, you'll see nothing is changing on that blue text until it reaches, until the top of this element reaches the center of the browser, so data center top. Then, as we continue to scroll until the top of that element reaches the top of the browser, it's gonna animate to white. So, it's animating from blue, to white over the course of half the height of the browser. So again, those are two different types of data attributes we're looking at here. Hopefully that made sense. One of the types represents the absolute positioning of the scroll bar. And the other one simply represents the position of a an element in relation to the browser or the viewable area of the browser itself. So, let's take a look at a few more examples before we move on and start our project. I'm gonna scroll down and here we have some comments with a few different examples, there's more than this but this covers most of them that you will really ever use. So, at the top we have what I've called browser level attributes. You can call them whatever you want to that's just the name I've given to them. So, we have things like what we saw before with data-100. So, if we see data-100, then we know that whatever element this is applied to, we're going to have some kind of keyframe when the browser has scrolled down to a value of 100 pixels. So, if we have data-0, it's gonna happen at the very top of the browser, or the top of the document. If we have date-1000, it's gonna happen whenever we scroll down 1000 pixels, so that's relative to the document itself. Now, we have a couple other options, we have data-start for example which would be the same as data-0. So, it's gonna be when your document is scrolled to the very top. We also have data-100-start, which is similar to saying data-100. So, data-100-start will be triggered whenever the document has scrolled down 100 pixels. So, again, it's the same as what we looked at before with data-100. So, if we come up here, we see data-1000, that would be the same as saying data 1000 start. Data-0 would be the same as saying as data start. So, then we have data-end, so this is after we've scrolled all the way down to the bottom of the document. So, when we get to the bottom of our document, for example, our background color is gonna be red instead of black. But there is a big difference between using data-end and using data-1000 as we did here. If we simply use data-end, then the height of our document is gonna be 100% determined by the content that's in it. Whereas, if we give it a value such as data-1000, then the document is gonna be at least 1,000 pixels tall, or we're gonna be able to scroll at least 1,000 pixels. So, let me show you the difference here. If I were to change this to data-end instead of data-1000, and save that, and then jump back into our browser, and refresh, you'll see that we don't have as far to scroll now. When the top of our text here reaches the top of the document, our scrolling is done. So, scroller is gonna look at whatever attributes we've applied and it's gonna make it just tall enough to meet those requirements. So, once the top of our text has reached the top of the document, it's not going to give us any further that we can scroll. Now, if we were to take that out completely, if we were to take out, I should say, this data-top-top here, I should get rid of that, save that, and refresh. Then we have even less scrolling to do. So, we get to the bottom of our content and our scrolling is done, and since we set that attribute to data-end instead of data-1000, once it reaches the end of that document, it's already gonna be, the background I should say, is already gonna be red. So, that 's going to be determined, or the height of the scrolling there is determined solely by the amount of content in the document. But once we add attributes rhat require more height in the document, that document height is going to expand. So, if we add a data-top top to this, then scroller is going to give a small room to scroll so that we can actually meet that condition so that we can actually get that text to the top of the document. And then, it will stop right there, but again if we change this from data-end to data-1000, save it, and refresh, then you'll see that we have a lot further that we can actually scroll. In fact, we have exactly one thousand pixels up and down that we can scroll. So, if we wanted to go crazy with this, we could put a huge number in there, and if you look at the size of the scroll bar now, and then, let's change this to data-10000 and save it. When we refresh our browser, you'll see that our scroll bar gets a lot smaller and we have a lot further that we can go so we get to about this point here and our text is now white but our background isn't anywhere close to turning red yet, it still looks black and we have a lot further that we can go to keep animating. So, scroller.js is going to give us just as much room as we need to finish out all the animations that we've defined using these data attributes. And that's really all it takes to create these animations, is creating the right data attributes. We need a starting key frame and an ending key frame, and then, inside the quotation marks, we are just using CSS values here. We are gonna animate a specific CSS property from one value here to another value here based on these data attributes. So, now that we understand these data attributes a little bit better, we are gonna move on to the next lesson. And, in that next lesson, you're gonna see that we're really only gonna use, for this course anyway, the data hyphen and then a number. We're not gonna use any of the data center top or anything like that, but I wanted you to know that those are there, and wanted to teach you how to read those, in case you wanted to use some of those for yourself. So, if you wanted to create animations similar to what we see with wow.js where an animation happens whenever an element scrolls onto the stage, we could do that using these type of data attributes. So, if we scroll back down to the bottom, we can see in the element level attributes a different data attributes that we can achieve that with. So, we have data-top for example, this is when the top of an element reaches the top of the browser. If we have data-bottom, that's when the bottom of an element reaches the bottom of the browser. Well, what if you wanted something to happen immediately when an item started to show up, such as in wow.js. So, as soon as an element reaches the bottom of the browser, we wanted that to happen. Well, this data-bottom doesn't work, because this is when the bottom of the element is equal to the bottom of the browser, so you can still see the entire element at this point. But remember, if we read from right to left we can make this work. So, if we change this to data-bottom-top, then we get what we're looking for. So, when the top of this element reaches the bottom of the browser window, then that can be the start of an animation. So, hopefully that makes sense, I'm gonna undo that and this will give you a little bit of a cheat sheet that you can use if you wanted to take a closer look at what you can do with scroller.js but hopefully that gives you a good starting point so that when we jump into the next lesson, we can get started building our site. Thank you for watching and I'll see you then.

Back to the top