/* scrollorama - The jQuery plugin for doing cool scrolly stuff by John Polacek (@johnpolacek) Dual licensed under MIT and GPL. */ (function($) { $.scrollorama = function(options) { // PRIVATE VARS var blocks = [], browserPrefix = '', onBlockChange = function() {}; var scrollorama = this; var defaults = {offset:0}; scrollorama.settings = $.extend({}, defaults, options); scrollorama.blockIndex = 0; if (options.blocks === undefined) alert('ERROR: Must assign blocks class selector to scrollorama plugin'); // PRIVATE FUNCTIONS function init() { if (typeof scrollorama.settings.blocks === 'string') scrollorama.settings.blocks = $(scrollorama.settings.blocks); // set browser prefix if ($.browser.mozilla) browserPrefix = '-moz-'; if ($.browser.webkit) browserPrefix = '-webkit-'; if ($.browser.opera) browserPrefix = '-o-'; if ($.browser.msie) browserPrefix = '-ms-'; // create blocks array to contain animation props $('body').css('position','relative'); var i; for (i=0; i"); var didScroll = false; $(window).scroll(function(){ didScroll = true; }); setInterval(function(){ if(didScroll){ onScrollorama(); didScroll = false; } }, 50); } function onScrollorama() { var scrollTop = $(window).scrollTop(); var currBlockIndex = getCurrBlockIndex(scrollTop); // update all animations for (var i=0; i currBlockIndex) { if (currBlockIndex != i-1 && anim.baseline != 'bottom') { setProperty(anim.element, anim.property, anim.startVal); } if (blocks[i].pin) { blocks[i].block .css('position', 'absolute') .css('top', blocks[i].top); } } // if below current block, settings should be at end value // unless on an element that gets animated when it hits the bottom of the viewport else if (i < currBlockIndex) { setProperty(anim.element, anim.property, anim.endVal); if (blocks[i].pin) { blocks[i].block .css('position', 'absolute') .css('top', (blocks[i].top + blocks[i].pin)); } } // otherwise, set values per scroll position if (i == currBlockIndex || (currBlockIndex == i-1 && anim.baseline == 'bottom')) { // if block gets pinned, set position fixed if (blocks[i].pin && currBlockIndex == i) { blocks[i].block .css('position', 'fixed') .css('top', 0); } // set start and end animation positions var startAnimPos = blocks[i].top + anim.delay; if (anim.baseline == 'bottom') startAnimPos -= $(window).height(); var endAnimPos = startAnimPos + anim.duration; // if scroll is before start of animation, set to start value if (scrollTop < startAnimPos) setProperty(anim.element, anim.property, anim.startVal); // if scroll is after end of animation, set to end value else if (scrollTop > endAnimPos) { setProperty(anim.element, anim.property, anim.endVal); if (blocks[i].pin) { blocks[i].block .css('position', 'absolute') .css('top', (blocks[i].top + blocks[i].pin)); } } // otherwise, set value based on scroll else { // calculate percent to animate var animPercent = (scrollTop - startAnimPos) / anim.duration; // then multiply the percent by the value range and calculate the new value var animVal = anim.startVal + (animPercent * (anim.endVal - anim.startVal)); setProperty(anim.element, anim.property, animVal); } } } } } // update blockIndex and trigger event if changed if (scrollorama.blockIndex != currBlockIndex) { scrollorama.blockIndex = currBlockIndex; onBlockChange(); } } function getCurrBlockIndex(scrollTop) { var currBlockIndex = 0; for (var i=0; i 0) { for (var j=0; j