4.1 Downloading Skrollr

Hello and welcome back to Scroll Events Made Easy. For our third project, we're gonna be using the scrollr.js framework, which is a little bit more flexible then the other frameworks we've used so far. So for our first framework we used parallax.js, which basically is a one trick pony. It allows us to create a Parallax scrolling background image, it's as easy as that. It's a really nice effect and it's a nice light-weight effect if that's all you want to do for your page. The WowJS framework is kind of a one trick pony as well. You have a few different types of animations you can create and you can make it a little more flexible using delays and things like that but for the most part it's just designed to create simple animations whenever you reach a certain item on the page. Once you scroll to a certain item, we saw the animation. Scrollr on the other hand is a little more flexible. It can achieve Parallax effects like we saw with the first one. We can animate items once we get to a certain scroll position. We can do everything we've done so far using scrollr.js and even more. So scrollr's a little bit more flexible. But again, if you just want to do one thing, if you only want to put a Parallax background image on your site, it's good to use Parallax.js, because it's nice and light-weight. It doesn't take up a whole lot of room and it It runs really smoothly. But if you need more flexibility and still something that's easy to implement, skrollr.js is the way to go. So here's what we're going to be creating. Again this is a course for designers not about design, [LAUGH] so we're not gonna spend a whole lot of time on the actual design of these pages, instead, we're going to focus on the functionality. So I've taken a kind of a slide show approach with this particular webpage. And as well scroll down in our browser, we're gonna see us moving from one slide to the next with different effects. So as we scroll down, we can see we can move an item off the stage, easy enough. As you can see, we can also change the background color. We can animate the background color as we scroll. We can move in from Stage Right, we can move in from the right as we fade an item in, we can adjust the margins or the sides of an object. Again here we have an example of text coming in from the top. And then we have another example of text fading in as it moves up. And in addition to that we have this nice little image on the left that's going to be animating up. So we have a few different animations that we're going to create here. And they're all going to be very, very easy to implement and they're all gonna to react to scrolling the page. And again, we're going to be using skrollr.js and we'll include the link for this in the course notes. But this is the basic website for skrollr.js, or at least the demo site, to kind of show you what it does. And you've already seen a demo of what we're gonna create but this has a little bit more to it. So we have some items that are kind of rotating as they scroll up. You'll see that these dots in the background are using a Parallax animation. The ones in the front are moving faster than the ones in the back. Again, we have some crazy transformations. Not exactly a nice looking animation but it's cool that we have that flexibility. So as we keep scrolling we can see all of these different animations. We can fade out, here you'll notice some animations with items bouncing up and down. And then we get to the bottom, so those are just a few examples of the kinds of things you can do with scrollr and it's all related to scrolling your browser window up and down. So if we want to download this we can jump over to GitHub and on GitHub again, in the upper right hand corner just above the list of files, there's a zip file that you can download. Now to save a little time I've already downloaded this and place the necessary files in finder. You'll notice in the site 09 folder we've got a new folder here. And if we open that folder up you'll see I have an images directory. Inside that we have shuttle.png which is that space shuttle we saw animating at the end, and the stars.gif file which is an animated image. And then we have our JavaScript folder, which contains our skrollr.js. And that skrollr.js when you download it as a zip file. You'll find it in the DIST folder, and here we have scroller.min.js. I might have gotten that scroller.js from the source folder. Yeah, there it is. So you can actually use either one of those. The scroller.min will obviously be a smaller more compact version. I will just include the full version in case you have the desire to go into that file and look at it. It's a little bit easier to read that the unified version. But you can put whatever version you want to put in there. So, we have our basic folder set up, let's drag that folder onto Brackets. And then let's create our index file. So, we'll create a new file here called index.html, and then we'll do our usual setup. And then I'm gonna be including jquery. You don't have to have jquery to use skrollr.js, but we're gonna be doing something extra. So I am gonna include jquery, and then in addition to jquery, we'll include another script tag. This is going to point to our java script file scroller.js or scroller.min.js, whichever one you prefer to use. So there's our two script files and then inside our body we'll get started in the next lesson. Thank you for watching, let's save our changes and I'll see you in the next lesson.