Learning by Hacking

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'
})

★ ★ ★

Hook into the onBlockChange event.

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