scrollorama
The jQuery plugin for doing cool scrolly stuff
Want to do super-scrolly stuff?
Check out Scrollorama2: SuperScrollorama
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
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 |
|