Skrollr for Beginners Tutorial

Skrollr is a scroller library that allows you to perform animations or changes to your web page’s content based on screen position. For example, you can make a div slowly appear, or slide in, as you scroll down the page. You can see it in action here.

This tutorial will cover the bare minimum you need to get Skrollr working. There are plenty of tutorials out there that show you how to do more advanced things, but this one will help you get your first Skrollr powered page.

Step 1

Download Skrollr from the project’s Github (click the “Download ZIP” link on the right).

Unzip the file, and inside the “dist” folder, you’ll find the “skrollr.min.js” file. Copy that file into your own project. In my case, I’ll put the file inside a “js” folder in my project.

Step 2

Add the script to the bottom of your HTML page, right before </body>:

Just make sure that the file is loading (the path you indicated in src points to the file).

Step 3

We can now animate things as people scroll down or up the page. There are all sorts of things you can do, but as a simple example, I’ll make something appear in the page as people scroll down by animating its opacity.

NOTE: This example will only work when the div I’m animating scrolls into view, so if you try this out, make sure that you have enough content above it to push it below the fold when you first load the page.

Here’s the HTML:

It’s all regular HTML (what’s inside “featurette” div doesn’t matter), except for lines 2 and 3, where I added the Skroller attributes:

• data-center-top: The animation will start when the top of the div reaches the center of the screen
  

  data-center-top

   

• data-top-top: The animation will end when the top of the div reaches the top of the screen
  

  data-top-top

   

In this example I used the top  as the part of the div that triggers the beginning and end of the animation at different points of the screen. You can also use bottom, or center. So, for example, you can set your animation to end (or begin) when the center of the div reaches the center of the screen: data-center-center.

data-center-center

Since this is a tutorial for beginners, I won’t go into detail as to more precise ways of picking the beginning and end of the changes. If you are interested, read the documentation about absolute an relative modes.

I only animated the “opacity” CSS property, but you can animate most other CSS properties. For example, assuming that “featurette” has been set to position:relative in your regular CSS file, you could then animate it so that it moves in from the side by animating its position (left or right).

As you can see, you can animate multiple properties at the same time.

This tutorial is very basic, and just so you can get your fee wet, but you should look at the documentation, and the example that comes with the download. As well, there are many intermediate and advanced tutorials on how to use Skrollr.

Happy scrolling!