dynamically generated parallax

gistfile1.txt

/* 
 * dynamically-generated parallax
 * A work in progress. Parse the page for various data attributes (used as options) which are
 * used to vary the scrolling on these blocks accordingly
 */


var NA = (function(options){
	var settings = { };

	var _body = $('body');
	var _window = $(window);
	var _scroll = ($.browser.mozilla || $.browser.msie) ? $('html') : _body;
	var _mobile = (_body.hasClass('webkit-mobile') || (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)));
	var _unsupported = false; // _body.hasClass('unsupported-browser');


 	function makeNavigation() {

		var sections = $('[data-nav]');
		var active = 0;

		if (!_mobile && !_unsupported) { 
			sections.each(function(i, section) {
				$('<a/>')
					.appendTo('nav')
					.prop('href', '#/' + $(section).data('nav'))
					.html( $(section).prop('id'))
					.bind('click', function(e) {
						e.preventDefault();
						console.log('nav clickededed');
						_body.triggerHandler('scrollTo', $(section).prop('id') );
					});
			});
		}

		_body
			.bind('sectionEnter', function(e, id) {
				sections.each( function(i) {
					if ( $(this).prop('id')==id ) { active = i; }
				});
			})
			.bind('keyRight', function(e) {

console.log('binding right');

				active++;
				if ( _active > sections.length-1 ) { active = sections.length-1; }
				_seek();
			})
			.bind('keyLeft', function(e) {
				active--;
				if (active<0) { active=0; }
				_seek();
			});

			function _seek() {
				_body.triggerHandler('scrollTo', sections[active].prop('id'))
			}
		
	};

	function makeScroll() {
		_body.bind('scrollTo', function(e, id) {
			console.log('scrolling to: '+id);
			var element = $('#'+id),
				  header = element.find('header'),
				  align = element.data('align'),
				  // offset = element.prop('data-scrolloffset') ? parseInt(element.prop('data-scrolloffset')) : 50,
				  top = element.offset().top;

			if (header.length>0 && align!="top") { 
				top = header.offset().top  + header.height()/2 - $.Window.height() / 2;
				if (top > header.offset().top)
					top = header.offset().top - 50
			}

			if (align=="center" && element.height() > _window.height()) {
				top = element.offset().top + (element.height() - _window.height()) / 2;
			}

			_scroll.stop().animate({ 'scrollTop': top }, 800, 'easeInOutQuart' );

		});

	};

	function bindKeys() {
		$(document).bind('keydown',function(e) {
			var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
			switch(key) {
				// case 27: //escape
				// 	_body.triggerHandler('keyEsc');
				// 	break;

				// case 32: //space
				// 	_body.triggerHandler('keySpace');
				// 	break;

				// case 38: //top
				// 	_body.triggerHandler('keyUp');
				// 	break;

				// case 40: ///bottom
				// 	_body.triggerHandler('keyDown');
				// 	break;

				case 39: //right
					_body.triggerHandler('keyRight');
				break;
				
				case 37: //left
					_body.triggerHandler('keyLeft');
					break;
			}
		});
	}

	function makeParallax(element, options) {
		var settings = { threshold:-100, intertia:0.15 };
		if (options) $.extend(settings, options);

		if (_mobile || _unsupported) {	
			element.css({ 'backgroundAttachment':'scroll' });
		} else {
			_window.bind('scroll', function(e){

				if ( $.inview(element, { threshold:settings.threshold }) ) {

					if (!element.hasClass('active')){
						element.addClass('active');
						if (settings.section) {
							_body.triggerHandler('sectionEnter', element.prop('id') );
						}
						// element.triggerHandler('windowScrollEnter');
					}

// console.log($.distancefromfold(element,{ threshold:settings.threshold }) - settings.threshold);
// scroll background
					var x = '50% ';
					var pos = x + (-($.distancefromfold(element,{ threshold:settings.threshold }) - settings.threshold) * settings.intertia) + 'px';
					element.css({'backgroundPosition':pos});


					// element.triggerHandler('windowScroll',$.distancefromfold(element,{ threshold:settings.threshold }) - settings.threshold);
				} else {
					if (element.hasClass('active')) {
						element.removeClass('active');
						// element.triggerHandler('windwScrollLeave');
					}
				}
			});
		}
	};

	return {
		applicable: function(options) { // a.k.a. "initialize"
			if (! (this instanceof arguments.callee)) {
				return new arguments.callee(arguments);
			}
			console.log('not.applicable');
			if (options) $.extend(settings, options);

			makeNavigation();
			makeScroll();
			bindKeys();

			var parallax = $('[data-parallax]');
			parallax.each(function(i, item){
				item = $(item);
				makeParallax( item, {
					inertia: item.data('parallax'),
					threshold: item.data('threshold'),	// distance from fold when section becomes active (may want to vary this for triangle sections which extend, eg)
					section: (item.prop('tagName') == 'SECTION')
				});				
			});
	
		}
	}

});
var not = new NA();



/* ---------------------------------- */

/* Worker */

(function($) {

	$.distancefromfold = function(element, settings) {
		if (settings.container === undefined || settings.container === window) {
			var fold = $(window).height() + $(window).scrollTop();
		} else {
			var fold = $(settings.container).offset().top + $(settings.container).height();
		}
		return (fold + settings.threshold) - element.offset().top ;
	};
	
	$.belowthefold = function(element, settings) {
		if (settings.container === undefined || settings.container === window) {
			var fold = $(window).height() + $(window).scrollTop();
		} else {
			var fold = $(settings.container).offset().top + $(settings.container).height();
		}
		return fold <= element.offset().top - settings.threshold;
	};
	
	$.abovethetop = function(element, settings) {
		if (settings.container === undefined || settings.container === window) {
			var fold = $(window).scrollTop();
		} else {
			var fold = $(settings.container).offset().top;
		}
		return fold >= element.offset().top + settings.threshold	+ element.height();
	};
	
	$.inview = function(element, settings) {
		return ($.abovethetop(element,settings)!=true && $.belowthefold(element,settings)!=true)
	};

	$.extend($.expr[':'], {
		"below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
		"above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})"
	});


	// easing
	$.extend($.easing,{def:"easeOutQuad",swing:function(x,t,b,c,d){return $.easing[$.easing.def](x,t,b,c,d);},easeInQuad:function(x,t,b,c,d){return c*(t/=d)*t+b;},easeOutQuad:function(x,t,b,c,d){return -c*(t/=d)*(t-2)+b;},easeInOutQuad:function(x,t,b,c,d){if((t/=d/2)<1){return c/2*t*t+b;}return -c/2*((--t)*(t-2)-1)+b;},easeInCubic:function(x,t,b,c,d){return c*(t/=d)*t*t+b;},easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b;},easeInOutCubic:function(x,t,b,c,d){if((t/=d/2)<1){return c/2*t*t*t+b;}return c/2*((t-=2)*t*t+2)+b;},easeInQuart:function(x,t,b,c,d){return c*(t/=d)*t*t*t+b;},easeOutQuart:function(x,t,b,c,d){return -c*((t=t/d-1)*t*t*t-1)+b;},easeInOutQuart:function(x,t,b,c,d){if((t/=d/2)<1){return c/2*t*t*t*t+b;}return -c/2*((t-=2)*t*t*t-2)+b;},easeInQuint:function(x,t,b,c,d){return c*(t/=d)*t*t*t*t+b;},easeOutQuint:function(x,t,b,c,d){return c*((t=t/d-1)*t*t*t*t+1)+b;},easeInOutQuint:function(x,t,b,c,d){if((t/=d/2)<1){return c/2*t*t*t*t*t+b;}return c/2*((t-=2)*t*t*t*t+2)+b;},easeInSine:function(x,t,b,c,d){return -c*Math.cos(t/d*(Math.PI/2))+c+b;},easeOutSine:function(x,t,b,c,d){return c*Math.sin(t/d*(Math.PI/2))+b;},easeInOutSine:function(x,t,b,c,d){return -c/2*(Math.cos(Math.PI*t/d)-1)+b;},easeInExpo:function(x,t,b,c,d){return (t==0)?b:c*Math.pow(2,10*(t/d-1))+b;},easeOutExpo:function(x,t,b,c,d){return (t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b;},easeInOutExpo:function(x,t,b,c,d){if(t==0){return b;}if(t==d){return b+c;}if((t/=d/2)<1){return c/2*Math.pow(2,10*(t-1))+b;}return c/2*(-Math.pow(2,-10*--t)+2)+b;},easeInCirc:function(x,t,b,c,d){return -c*(Math.sqrt(1-(t/=d)*t)-1)+b;},easeOutCirc:function(x,t,b,c,d){return c*Math.sqrt(1-(t=t/d-1)*t)+b;},easeInOutCirc:function(x,t,b,c,d){if((t/=d/2)<1){return -c/2*(Math.sqrt(1-t*t)-1)+b;}return c/2*(Math.sqrt(1-(t-=2)*t)+1)+b;},easeInElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0){return b;}if((t/=d)==1){return b+c;}if(!p){p=d*0.3;}if(a<Math.abs(c)){a=c;var s=p/4;}else{var s=p/(2*Math.PI)*Math.asin(c/a);}return -(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;},easeOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0){return b;}if((t/=d)==1){return b+c;}if(!p){p=d*0.3;}if(a<Math.abs(c)){a=c;var s=p/4;}else{var s=p/(2*Math.PI)*Math.asin(c/a);}return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b;},easeInOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0){return b;}if((t/=d/2)==2){return b+c;}if(!p){p=d*(0.3*1.5);}if(a<Math.abs(c)){a=c;var s=p/4;}else{var s=p/(2*Math.PI)*Math.asin(c/a);}if(t<1){return -0.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;}return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*0.5+c+b;},easeInBack:function(x,t,b,c,d,s){if(s==undefined){s=1.70158;}return c*(t/=d)*t*((s+1)*t-s)+b;},easeOutBack:function(x,t,b,c,d,s){if(s==undefined){s=1.70158;}return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b;},easeInOutBack:function(x,t,b,c,d,s){if(s==undefined){s=1.70158;}if((t/=d/2)<1){return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;}return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b;},easeInBounce:function(x,t,b,c,d){return c-$.easing.easeOutBounce(x,d-t,0,c,d)+b;},easeOutBounce:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b;}else{if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+0.75)+b;}else{if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+0.9375)+b;}else{return c*(7.5625*(t-=(2.625/2.75))*t+0.984375)+b;}}}},easeInOutBounce:function(x,t,b,c,d){if(t<d/2){return $.easing.easeInBounce(x,t*2,0,c,d)*0.5+b;}return $.easing.easeOutBounce(x,t*2-d,0,c,d)*0.5+c*0.5+b;}});

/*
	// mouse wheel
	$.fn.wheel=function(D){	return this[D?"bind":"trigger"]("wheel",D)};
	$.event.special.wheel={setup:function(){$.event.add(this,C,B,{})},teardown:function(){$.event.remove(this,C,B)}};
	var C=!$.browser.mozilla?"mousewheel":"DOMMouseScroll"+($.browser.version<"1.9"?" mousemove":"");
	function B(D){switch(D.type){case"mousemove":return $.extend(D.data,{clientX:D.clientX,clientY:D.clientY,pageX:D.pageX,pageY:D.pageY});
	case"DOMMouseScroll":$.extend(D,D.data);D.delta=-D.detail/3;break;case"mousewheel":D.delta=D.wheelDelta/120;if($.browser.opera){D.delta*=-1}break}
	D.type="wheel";return $.event.handle.call(this,D,D.delta)}
*/	


})(jQuery);	



































/*


	$('.jump').click(function(e){
		e.preventDefault();
		var to = $(this).prop('href');
		if(to=='#') to = 0;
		$(window).scrollTo(to,500);
	});


	// DEFINE sections
	var now, active = 'blue';
	var blue =	$('#blue').offset().top;
	var pink = 	$('#pink').offset().top;
	var red =	$('#red').offset().top;


	// SKRULL
	$(window).scroll(function(){
		var offset = $(window).scrollTop();

		$('.active .parallax').each(function(){ $(this).css('top',-Math.round( offset * $(this).prop('data-offset'))) });
//		$('.active .bg').each(function(){	$(this).css('background-position', '50% -'+ -Math.round( offset * $(this).prop('data-offset')) + 'px' ); });

		if (offset < blue) { now = 'blue'; }
		else if (offset >= pink) { now = 'pink'; }
		else { now = 'red'; }

		if (now != active) {					
			$('section').removeClass('active');
			$('#'+now).addClass('active');
			active = now;
		}
	});


});



*/


/**
 * jQuery.ScrollTo - Easy element scrolling using jQuery.
 * Copyright (c) 2007-2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
 * Dual licensed under MIT and GPL.
 * @author Ariel Flesler
 * /
;(function(h){var m=h.scrollTo=function(b,c,g){h(window).scrollTo(b,c,g)};m.defaults={axis:'y',duration:1};m.window=function(b){return h(window).scrollable()};h.fn.scrollable=function(){return this.map(function(){var b=this.parentWindow||this.defaultView,c=this.nodeName=='#document'?b.frameElement||b:this,g=c.contentDocument||(c.contentWindow||c).document,i=c.setInterval;return c.nodeName=='IFRAME'||i&&h.browser.safari?g.body:i?g.documentElement:this})};h.fn.scrollTo=function(r,j,a){if(typeof j=='object'){a=j;j=0}if(typeof a=='function')a={onAfter:a};a=h.extend({},m.defaults,a);j=j||a.speed||a.duration;a.queue=a.queue&&a.axis.length>1;if(a.queue)j/=2;a.offset=n(a.offset);a.over=n(a.over);return this.scrollable().each(function(){var k=this,o=h(k),d=r,l,e={},p=o.is('html,body');switch(typeof d){case'number':case'string':if(/^([+-]=)?\d+(px)?$/.test(d)){d=n(d);break}d=h(d,this);case'object':if(d.is||d.style)l=(d=h(d)).offset()}h.each(a.axis.split(''),function(b,c){var g=c=='x'?'Left':'Top',i=g.toLowerCase(),f='scroll'+g,s=k[f],t=c=='x'?'Width':'Height',v=t.toLowerCase();if(l){e[f]=l[i]+(p?0:s-o.offset()[i]);if(a.margin){e[f]-=parseInt(d.css('margin'+g))||0;e[f]-=parseInt(d.css('border'+g+'Width'))||0}e[f]+=a.offset[i]||0;if(a.over[i])e[f]+=d[v]()*a.over[i]}else e[f]=d[i];if(/^\d+$/.test(e[f]))e[f]=e[f]<=0?0:Math.min(e[f],u(t));if(!b&&a.queue){if(s!=e[f])q(a.onAfterFirst);delete e[f]}});q(a.onAfter);function q(b){o.animate(e,j,a.easing,b&&function(){b.call(this,r,a)})};function u(b){var c='scroll'+b,g=k.ownerDocument;return p?Math.max(g.documentElement[c],g.body[c]):k[c]}}).end()};function n(b){return typeof b=='object'?b:{top:b,left:b}}})(jQuery);
*/