Skrollr – CSS animations linked to scroll position

Having seen a few single-page year in review minisites the past few weeks, it’s clear that Skrollr has become the de facto standard to implement parallax scrolling effects into your websites.

The idea behind Skrollr is straightforward: link a target CSS property+value to a given scroll position, via data-* attributes:

<div id="example" data-0="width:100%;" data-1500="width:0%;"></div>

Skrollr will interpolate between the start and end value whilst you scroll.

A really neat (and CPU intensive) example is Flat Design vs. Realism.

The folks over a Pingdom have created a little helper function, which they’ve used in their year in review page, to define all values via JavaScript. The essence of the function is this (simplified version of their code):

var setSkrollr = function($el, data) {
    for (var i = 0, l = data.length; i < l; i++) { // loop all data entries (scroll positions + css property & value)
        var d = data[i], // the current data entry
            px = d[0]; // the scroll position (in pixels)
            css = d[1]; // the css property + value to set
        $el.attr('data-' + px, css);
    }
}

Usage is as follows:

setSkrollr($('#example'), [[0, 'width:100%'], [1500, 'width:0%']]);
setSkrollr($('#example2'), [[0, 'transform:translateY(-100%)'], [1500, 'transform:translateY(100%)']]);

I've knocked up a quick demo on codepen:

Check out this Pen!

The key part is position: fixed on all elements to prevent them from scrolling offscreen whilst you scroll. If you don't want to do this, you could wrap all elements into one wrapper div with position: fixed applied to it:

Check out this Pen!

A nice and simple example to get some more inspiration from is this Christmas-themed page.

Skrollr →
Flat Design vs. Realism →
Pingdom: 2013 – year in review →
Merry Xmas Demo →