Pull Off Awesome Scroll Effects With Stroll.js

Scrolling effects are all the rage these days. As the user moves down the page, content does more than move up the screen, it comes alive and becomes more interesting. Unfortunately, there’s no easy way to pull these effects off with pure CSS. If you don’t know JavaScript, you’re out of luck.

That’s where Stroll.js comes in. It’s a super easy to implement library that makes applying mind-boggling scroll effects a breeze. All you have to do is paste in a couple of brief lines of JavaScript, the rest is all handled with HTML and CSS. Keep reading and I’ll show you how it works.

2 Million+ Digital Assets, With Unlimited Downloads

Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.

Explore Envato Elements

Meet Stroll.js

Stroll.js is a neat little JavaScript library that brings a bunch of eye-catching animations to the scroll action on list items. The idea is that you have a group of items in a scrollable list and you use Stroll.js to make browsing that list more interesting.

screenshot

The project home page (shown above) has a bunch of demos that you can try out to see the types off effects that are included. The animations themselves are actually built with simple CSS3 transformations so you should easily be able to add to and customize the library with your own ideas.

Let’s Build a Demo!

Every time I come across a cool project like Stroll.js, I immediately want to dive in, kick the tires and see how it all works. Reading boring documentation is all well and fine, but I really can’t get a feel for something like this until I try it myself. That’s what we’re going to be doing today.

Demo: Click here to launch.

HTML

To start off, we know we’re going to need a list because that’s what Stroll.js is all about: animating list scrolls. The list items on the demo were just a simple line of text, but I want to push it much further to see how Stroll.js handles it. We’ll make each list item contain an image, headline and paragraph.

If you use Zen Coding like I do, type the following into your HTML editor (otherwise, just type out the next part manually).

ul>li>img+h2+p

As you can see, we started with an unordered list, then gave it a list-item child, which contains the three elements we just said that we wanted. When you hit tab or whatever shortcut your editor uses, this will expand into the following HTML:

<ul>
  <li>
    <img src="" >
    <h2></h2>
    <p></p>
  </li>
</ul>

If we dig around in the documentation, we can see that the type of effect that occurs is based on the class applied to the unordered list. To start, I’ll go with the “flip” effect. Also, the JavaScript will target the list’s parent item, so we’ll need to add one of those.

<div id="main">
  <ul class="flip">
    <li>
    <img src="" >
    <h2></h2>
    <p></p>
    </li>
  </ul>
</div>

Next, we’ll need to flesh out the content within the list item. I’ll toss in an image, headline and some placeholder paragraph text.

<div id="main">
  <ul class="flip">
    <li>
      <img src="http://lorempixum.com/200/200/city/1">
      <h2>Headline One</h2>
      <p>Lorem ipsum dolor sit...</p>
    </li>
  </ul>
</div>

Finally, we’ll expand our list to include a total of eight list items. This doesn’t seem like a lot but they’ll be nice and large so we’ll have plenty of room for scrolling.

<div id="main">
  <ul class="flip">
    <li>
      <img src="http://lorempixum.com/200/200/city/1">
      <h2>Headline One</h2>
      <p>Lorem ipsum dolor sit...</p>
    </li>
    <li>
      <img src="http://lorempixum.com/200/200/city/2">
      <h2>Headline Two</h2>
      <p>Lorem ipsum dolor sit...</p>
    </li>
    <li>
      <img src="http://lorempixum.com/200/200/city/3">
      <h2>Headline Three</h2>
      <p>Lorem ipsum dolor sit...</p>
    </li>
    <li>
      <img src="http://lorempixum.com/200/200/city/4">
      <h2>Headline Four</h2>
      <p>Lorem ipsum dolor sit...</p>
    </li>
    <li>
      <img src="http://lorempixum.com/200/200/city/5">
      <h2>Headline Five</h2>
      <p>Lorem ipsum dolor sit...</p>
    </li>
    <li>
      <img src="http://lorempixum.com/200/200/city/1">
      <h2>Headline Six</h2>
      <p>Lorem ipsum dolor sit...</p>
    </li>
    <li>
      <img src="http://lorempixum.com/200/200/city/1">
      <h2>Headline Seven</h2>
      <p>Lorem ipsum dolor sit...</p>
    </li>
    <li>
      <img src="http://lorempixum.com/200/200/city/8">
      <h2>Headline Eight</h2>
      <p>Lorem ipsum dolor sit...</p>
    </li>
  </ul>
</div>

Progress Check

You should have all your content on the page at this point. It’ll look like a big mess right now but we’ll fix that in the next step with CSS.

screenshot

CSS

Now that we’ve got our content in order, it’s time to prettify it with some CSS styling. This will be accomplished with four distinct categories of styles: basic, images, typography and list.

Basic

There’s nothing special here, just a lazy man’s reset and a background color for the body. Obviously, in a real project you’ll implement a more detailed and specific reset but for demo purposes there’s no reason to dive into something that deep.

/*Basic Styles*/
* {margin: 0px; padding: 0px;}

body {
  background: #333;
}

Images

For the image styles, we’ll add a margin of 20px to give them some breathing room and a border-radius of 50% (look ma, no browser prefixes!) to make the thumbnails perfectly round. Also, we’ll float the images left so that the text appears along side them rather than under them.

/*Images*/
img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}

Typography

For the type, we need to define our h2 and paragraph styles. I used shorthand to give the header a bold, sans-serif treatment and the paragraph a normal weight, serif treatment. Also notice that the paragraph has a slightly lighter color to help differentiate the two visually.

/*Type*/
h2 {
  margin-top: 25px;
  font: bold 30px Helvetica, Arila, sans-serif;
  color: #000;
}

p {
  font: 13px/1.5 Georgia, Times, serif;
  color: #757575;
}

List

Now it’s time for the biggest chunk of CSS, the final piece that will make our list items look perfect. Set the position to relative, the width to 800px and the height to 510px. Then apply some margins and padding and be sure the list-style is set to none.

The thing that you really have to get right is the overflow. Set the overflow-x to hidden and the overflow-y to scroll that way your list will actually be scrollable.

/*List Styles*/
ul {
  position: relative;
  width: 800px;
  height: 510px;
  margin: 50px auto;
  padding: 0;
  list-style: none;
  overflow-x: hidden;
  overflow-y: scroll;
}

Now that we have the unordered list styles worked out, it’s time to drill down and set the list-item styles. Once again, set the position (relative), height (200px), and padding (20px). Then set the colors for the background and type, set the overflow to auto and the z-index to two.

The tricky part here is that second selector. I’m using nth-child(odd) to vary the color of every other list-item, which helps each stand out from the next. This isn’t supported well on IE, but neither is Stroll.js so we’ll use it anyway. However, always remember that you can use Selectivizr to increase your selector support. Ultimately, if the scrolling effects aren’t widely supported, it’s no big deal (they’re pure eye candy), but you should make the other visual styling as cross-browser as possible.

ul li {
  position: relative;
  height: 200px;
  padding: 20px;
  background: #eee;
  color: #252525;
  z-index: 2;
  overflow: auto;
}

ul li:nth-child(odd) {
  background: #fff;
}

Progress Check

Most of our work is done! Our list looks fantastic, all that’s left to do is bring it to life with a tiny bit of JavaScript. It won’t hurt a bit, I promise.

screenshot

JavaScript

Now, I promised when we started this project that you didn’t need to know JavaScript to proceed. However, here I am throwing JavaScript at you! What gives? The truth is, you do need a tiny bit of JS, but a copy and paste action will work just fine and it’s easy to customize for your project.

Toss this code in at the end of the body in your HTML.

<script src="js/stroll.min.js"></script>
<script>
  stroll.bind( '#main ul' );
</script>

See? That wasn’t so bad. All you have to do to customize it is make sure that you target the right ID. We used “#main” in our project today, but feel free to change this for your own uses.

It’s Alive!

With that we’re all finished! All we have to do to change the effect is apply a different class on the unordered list. For the demo, I used the flip, curl and tilt effects.

Demo: Click here to launch.

screenshot

What Do You Think?

Thinking about how to make scroll events more interesting opens up a whole new realm of interesting design possibilities. As with any effect, these can be used for good or evil. Taking them too far or abusing them will result in a dizzying page that no one will want to use. Use Stroll.js sparingly and it will have a much greater effect.

Leave a comment and let us know what you think of Stroll.js. Do you like scrolling animations or would you prefer that developers stop finding new places to stick more animations? Let us know!