Submit your widget

scrollorama---The jQuery cool scrolly plugin

Created 7 years ago   Views 37166   downloads 14153    Author johnpolacek
scrollorama---The jQuery cool scrolly plugin
View DemoDownload 44.8 KB
113
Share |

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

he animation parameters you can use are:

  • duration number of pixels of scrolling the animation lasts
  • delay number of pixels of scrolling before the animation starts(animation is set to begin when the top of the scroll block is at the bottom of browser window)
  • property css property being animated (must be numeric)
  • start value of the css property at the start of the animation (if unassigned, will be the element’s current property value)
  • end value of the css property at the end of the animation (if unassigned, will be the element’s current property value)
  • pin set to true if you want the scroll block to be pinned during its animations (note: block will be pinned for all its element’s animations)

Hook into the onBlockChange event.

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

The article source:http://johnpolacek.github.com/scrollorama/