3.2 Scroll Hijacking with OnePage-Scroll.js

In the last lesson we learned how to use WOW.js JavaScript library to create some animate.css animations as the user scrolled down the page. In this lesson we'll learn how to perform scroll hijacking by making use of another handy plugin called One Page Scroll JS. So if we look at this One Page Scroll plug-in's website, we can see how it works. There's a pagination over here and if we try to scroll with our mouse wheel, it scrolls down the entire page. You scroll back up, it scrolls back up the entire page. We can use the pagination to navigate as well. And indeed, it's pretty neat. So the way to implement this is really simple. We just declare a class of like when element with a class. And then say onepage_scroll on it. All the children, like, all the immediate children of that element will become these slides. So let's get started, and we'll create a new folder here, and we'll call it OnePageScroll. Drag that into Sublime Text. Create a new file here. Call it index.html and add our generic boilerplate to it. We'll call it OnePageScroll. Save that and go ahead and make our folder, CSS folder inside of that, we'll add a new file, our style.styl file. We'll save that. Make sure that we're importing our style sheet. And let's open up a Terminal. Cd to our desktop. Cd to our OnePageScroll folder. Cd to our CSS folder then run our stylus use autoprefixer-stylus -w style.styl. Okay? Good it's watching it. Now we need to add our our markup in here. So we'll create a div with the class of main. Inside of that div, we'll make a couple sections and, just inside of each of the sections, we'll have that h1 tag that says, Hello World. And, inside of our second section, we'll have an h1 tag that says, Hello World 2. We'll save that. Now, we need to go grab the actual, One Page Scroll JavaScript file. So I'll go to GitHub. And here it is, onepage-scroll.min.js. And we'll just click Raw there. And we'll select all, copy that. And we'll add this to a new folder called js. Inside that we'll create a new file called onepagescroll.js and we'll just paste that in there and save. Okay. Now we need to make sure that we are calling that. So we'll come down here and add a new script tag, say js/onepagescroll.js and we need jQuery as well, so we'll go find the Google CDN version of it. So Google for Google CDN, click on jQuery here, and grab this to snip it. Paste that in above the, our, our onePageScroll.js file. Make sure to put the HTTP protocol in front of it, since we're running it locally. And, we also need the CSS file for it. So, go back to the repository, click on this, onepage-scroll.css file. Click Raw, we'll just copy that. Come back over here and add that file to our CSS folder. We'll call it, onepagescroll.css. And we'll paste that in there, save it. And now in our our style.styl sheet we can just say @import onepagescroll.css and save it. Now we need to make another main.js file, so we'll go into our JavaScript folder here and say main.js. And we'll load that underneath our imports for jQuery and OnePageScroll here. So, say script source.js main.js, then save it. And we'll come over here and we'll use our jQuery ready function. [BLANK_AUDIO] And we'll call it on this this main container here. And we'll say onepage_scroll, open close parentheses, and save it. Now open this file up. And voila. We've got scroll hijacking. [BLANK_AUDIO] But wouldn't it be cooler if these elements slid into position whenever you went to the slide? Like if they weren't already there, just sitting there statically? If we right-click on here and we go down to Inspect Element, we can see that this section has the class of active on it, and if we scroll up the active switches to this section. So what we can do, is we can make a key frame animation that is only present whenever the active class is on. So, let's go and do that real quick. So inside of our stylesheet, we'll come down here and say @keyframes slideInFromLeft. We'll say at 0% we want the margin left to be negative 100%, and at 100% we want the margin left just to be 0, just cancel it out. And then we'll come in here and we'll say whenever a section is active, we want the h1 in that section to have this animation. So animation slideInFromLeft and we'll have it go for two seconds. And we want it to move forward, so that means whenever it slides in from the left side, and comes into the middle, or into the actual slide, it'll just stay there. It won't keep repeating or anything like that. So we'll save it. Now, let's refresh. [BLANK_AUDIO] And voila. [BLANK_AUDIO] Now, let's style this up just a little bit more to make it look a little bit prettier. So let's go in here and make our first section. Give it a background color we'll say like a light red color. And, our second section we'll say nth-child(2). So this is the second section. We'll give it a background color of a light blue color. And we'll give both of them a text color of white. We'll make the text aligned to center for both of them. And the font family will be sans serif for both of them. So save that, refresh. [BLANK_AUDIO] Pretty cool, huh? So now, you might notice that these, this pagination over here is black whenever we want to be, let's say a different color. So, what we can do is right-click and, Inspect Element. And look for where it's getting the, the black color. So maybe this anchor here, we open it up. Okay, this before tag here has a border of black. So what we can do is just click here to select this selector. And we come down here and just drop that selector in. And we can say border-color white. And then refresh. And now we've got that one. And we'll inspect element on this little bullet here. And do the same thing. And it's just the background color this time, so, select that selector. Come down here, drop it in, and say background-color white, and save it and refresh. [BLANK_AUDIO] So now we've customized the pagination, we've got animation, and not only are we animating during our scroll hijacking, like between slides, but we're also sliding in fresh content. So, this content could be anything. It could be SVGs, it could be video. You know, it could be a paragraph. You could be sliding in stuff from all over. And that's, a lot of people do that to you know, great effect but personally I'm not a big fan of scroll hijacking. I don't like whenever things take over control of my mouse, and a lot of people feel very similar. But, you know it's very dependent on the project that you're working on and your needs from the client and such. So, this might work for you.