scrollorama Fork me on GitHub

scrollorama

created by John Polacek

The jQuery plugin for doing cool scrolly stuff
Want to do super-scrolly stuff?
Check out Scrollorama2: SuperScrollorama

DOWNLOAD
zip tar

Transitions

Fade In

Fly In

Rotate In

Zoom In

Any numeric CSS property

Pin It

★ Then unpin it ★

Parallax

Parallax

Parallax

Easing

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:

  • 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)

★ ★ ★

Hook into the onBlockChange event.

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

★ ★ ★

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

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

Address Feedback
John Smith


75, Summer Street, 5th floor
New York 10012
tel.+3(856)Name

submit
Православная психология и психотерапия Обучение онлайн - КРУТИКУС Хостинг от uCoz
код вашей формы