What we’ve been working on – a parallax library

I guess this counts as a quick update, because I’m not actually going to post any code.

Lately we’ve been working on a parallax scroll website for a client of ours. The most similar one to the design we’re working on is victoriabeckham.landrover.com/INT

Anyway, it turns out there aren’t many good libraries out their for facilitating the scroll workflow, so we wrote our own! (Later we found skrollr, which is similar, but has a different design philosophy with different trade-offs.)

Here are some of the essentials of what we’ve done:

• Works in FF 4+, Chrome, Safari, iOS and Android. IE9+ is solid but we haven’t finished on IE8 yet. Will test in Opera soon.
• Does its best to ensure everything is graphics accelerated. It’s pumping at 60fps on my machine in Chrome Canary.
• Scroll effects are specified separately to the CSS and the HTML; you attach a ‘scroll behaviour’ to an element, which is analogous to a CSS class, and the effects corresponding to that behaviour are in their own file
• It has a neat way of sequencing effects, mentioned below.

The hard problem

One big problem with running effects on scroll is specifying when they start and end. There are two obvious ways:

1. Start based on absolute scroll position – how many pixels the user has scrolled
2. Start relative to the top of the element

Both have advantages and disadvantages. The advantage of 2) is that you can move the element or change what’s earlier than it in the scroll flow and the effect stays the same. The advantage of 1) is that you can more easily specify a bunch of related effects on different elements. So for instance, if the effect on one element should start as an effect on another finishes, it’s a lot easier with absolute references from the top of the element.

Both methods were proving really tricky for us to get all the effects to look perfect, so we came up with a hybrid option: scroll marks. The idea is that you periodically attach a scroll mark to an element, and then every effect that follows (until the next scroll mark) is defined relative to the mark. That way, if you insert or remove something above the scroll mark the effect stays the same, and you also get predictability for the sequencing of related effects.

Differences to skrollr

Skrolr is like CSS in that you can specify keyframes for any style properties of an element. Our library is different: you’re forced to pick from a set of preprogrammed effects, such as translateX/Y, scale, fadeIn/Out, and so on. The rationale is that these effects are carefully coded so as to use graphics acceleration when available in browsers – that’s how the high FPS is achieved. But this also means that skrollr is more flexible in terms of the effects you can specify without having to do any coding.

Skrollr also doesn’t have scroll marks: instead you can choose whether the effect is relative to the element or the scroll position.

What’s next

We’ll release the library once we’re done with the site for the current client. This will probably involve a final review and clean-up of the code, plus a better set of tests for cross-browser compatibility. We’ve really enjoyed this one, so we’re really keen to get it out so others can start using it!