article:
JS Plugin: SuperScrollorama
article:
Elements Design: Admin Login

JS Plugin: Scrollorama

Advertisement

"The jQuery plugin for doing cool scrolly stuff."


Sample

Plugin: Scrollorama


Plugin: Scrollorama


Plugin: Scrollorama



Usage

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:

1. duration - number of pixels of scrolling the animation lasts;
2. 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);
3. property - css property being animated (must be numeric);
4. start - value of the css property at the start of the animation (if unassigned, will be the element’s current property value);
5. end - value of the css property at the end of the animation (if unassigned, will be the element’s current property value);
6. 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);
7. easing - 'bounce baby, bounce.' use the same easing equations you're used to. (if unassigned, will be a linear transition);





source
download

Advertisement
Tags: plugin, jquery, scroll, effect, layout, develop, css, html, internet, web

Leave a Comment

No Comment

© Creative3x Ltd.