A Vertical Scrolling Test with Scrollorama

A Test based on scrollorama by John Polacek

Examples

Several different types of transitions:

Fade In

Fly In

Rotate In

Zoom In

You can apparently animate any numeric CSS property

You can "Pin" Something

Then unpin it

You can do Parallax

Parallax

Parallax

Code:

The 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)
  (also can be a function that returns a value for dynamic heights)
• end value of the css property at the end of the animation (if unassigned, will be the element’s current property value)
  (also can be a function that returns a value for dynamic heights)
• 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)
• easing 'bounce baby, bounce.' use the same easing equations you're used to. (if unassigned, will be a linear transition)

Note: If you are not using the pinning feature, it is recommended you disable it. Pinning requires scroll blocks to be converted to absolute positioning, which can break some layouts.

$(document).ready(function() {
    var scrollorama = $.scrollorama({
        enablePin:false
    });
});

About

Scrollorama by John Polacek

Lettering.js by Dave Rupert