Want to keep the TNW Conference vibe going?? Tickets for TNW2022 are available now >>

The heart of tech

This article was published on January 16, 2012

    Create killer scrolling websites with the Scrollorama jQuery plugin

    Create killer scrolling websites with the Scrollorama jQuery plugin
    Harrison Weber
    Story by

    Harrison Weber

    Harrison Weber is TNW's Features Editor in NYC. Part writer, part designer. Stay in touch: Twitter @harrisonweber, Google+ and Email. Harrison Weber is TNW's Features Editor in NYC. Part writer, part designer. Stay in touch: Twitter @harrisonweber, Google+ and Email.

    Out of all the Web design fads to emerge since the glossy days when Web 2.0 was cool, scrolling (parallax) websites have emerged as a surprisingly powerful and useful trend. This attention-grabbing technique certainly isn’t new, but is fast becoming a successful tool for generating interest.

    Of course, I’m not talking about any website with a scroll bar, but a design style that leads viewers to continuously scroll down the page. “In web design use, parallax refers to the scrolling technique used to create the illusion of depth on websites” (via 1stwebdesigner), and if you’re interested in creating a site like Nike Better World, there’s a new jQuery plugin out there that speeds up the entire process.

    By allowing designers to create transitions out of any numeric CSS property, Scrollorama is one of the quickest ways to develop your own scrolling website, without getting your hands too dirty with JavaScript. From creator John Polacek:

    Scrollorama is the jQuery plugin for doing cool scrolly stuff. Basically, it lets you animate elements on the page based on the browser window’s scroll position.

    In case you are familiar with HTML and CSS, you should know that jQuery’s JavaScript library makes for the perfect transition to full-on JavaScript, since it hides a lot of complexities with pre-existing functions. You might also want to check out Polacek’s other recent project, scrolldeck.js: a plugin is for making vertically scrolling slide decks. If you’re an eager developer you can also fork the project on Github.

    While Polacek is exaggerating his site’s design to show the possible uses for his plugin, there are a ton of awesome, yet practical applications out there. For inspiration, check out Living Word and Jan Ploch, which are both so well designed that it’s nearly impossible to not explore every inch of the page!

    ➤ 

    If you liked this, visit our full Design and Dev channel for more inspiration!