scrollorama

created by John Polacek

The jQuery plugin for doing cool scrolly stuff

DOWNLOAD
zip tar

Transitions

Fade In

Fly In

Rotate In

Zoom In

Any numeric CSS property

Pin It

★ Then unpin it ★

Parallax

Parallax

Parallax

How To Use

Disclaimer: This is an experimental, just-for-fun sort of project and hasn’t been thoroughly tested.

Design and build your site, dividing your content into blocks.

★ ★ ★

Embed scrollorama.js after jQuery and initialize the plugin, passing the blocks class selector as a parameter.

$(document).ready(function() {
    var scrollorama = $.scrollorama({
        blocks:'.scrollblock'
    });
});

★ ★ ★

Target an element and animate its properties.

scrollorama.animate('#example1',{
    duration:400, property:'opacity'
})

The animation parameters you can use are:

★ ★ ★

Hook into the onBlockChange event.

scrollorama.onBlockChange(function() {
    alert('You just scrolled to block#'+scrollorama.blockIndex);
});

Credits

scrollorama by John Polacek

Lettering.js by Dave Rupert

Bowlby One SC Font by Vernon Adams

★ ★ ★

If you like scrollorama, give scrolldeck a try