John Polacek

Chicago Web Developer

Engineering manager and frontend lead at Howl

My product recommendations at shop.howl.me

Shipping open source on Github

Follow me at @johnpolacek

Scrollorama

Originally published on 1/1/2012

Over my holiday/new-baby-time-off break, I took some time to work on a couple new jQuery plugins that Ive been thinking about. Im a fan of the various cool scrolly sites out there like this and this. I also dig slideshow presentation plugins like deck.js and reveal.js

With that in mind, Ive created Scrollorama, the jQuery plugin for doing cool scrolly things. Basically, it lets you animate elements on the page based on the browser windows scroll position. You can see what I mean by checking out the project demo page on Github.

The other plugin I made is scrolldeck.js, which is for making vertically scrolling slide decks. It uses Scrollorama and keyboard listening to manage the slide transitions. You can see it in action on its demo page, and also in some example scrolldecks I created. What The Heck Is Responsive Web Design? is a scrolldeck that demonstrates a variety of features, particularly animation builds. Infographics Are Cool is a demo of how to create a scrolldeck of full screen images. Lastly, I created a parallax scrolldeck demo of how to use it with the Parallax jQuery Plugin.