implemented scroll event input & background position rendering output

made option prehandling function turn preset callback names into the
actual function objects to speed up internal processing and fix option
consistency

Author: pospi

jcp-layer.js

@@ -17,9 +17,7 @@ jcparallax.Layer = function(viewport, el, options)
 	// setup instance options
 	this.viewport = viewport;
 	this.element = el;
-	this.options = options;
-
-	jcparallax.Viewport._calcMovementRanges(this.options);
+	this.options = jcparallax.Viewport._inferMovementRanges(options);
 
 	// store animation event handler to be called by our Viewport
 	if ($.isFunction(this.options.animHandler)) {
@@ -84,6 +82,7 @@ $.extend(jcparallax.Layer.prototype, {
 		} else {
 			yRange = this._calculateMovementRange(yRangeOrCb);
 		}
+
 		this.minX = xRange[0];
 		this.rangeX = xRange[1] - xRange[0];
 		this.minY = yRange[0];
@@ -136,7 +135,9 @@ jcparallax.Layer.animHandlers = {
 
 	background : function(xVal, yVal)
 	{
-
+		return {
+			'background-position' : (this.minX + (xVal * this.rangeX)) + 'px ' + (this.minY + (yVal * this.rangeY)) + 'px',
+		};
 	},
 
 	stretch : function(xVal, yVal)
@@ -163,24 +164,22 @@ jcparallax.Layer.rangeCalculators = {
 
 	width : function(el, vp)
 	{
-		var wDelta = vp.sizeX - el.width();
-		return [0, wDelta];
+		return [0, vp.sizeX - el.width()];
 	},
 
 	height : function(el, vp)
 	{
-		var hDelta = vp.sizeY - el.height();
-		return [hDelta, 0];
+		return [vp.sizeY - el.height(), 0];
 	},
 
 	scrollWidth : function(el, vp)
 	{
-		return [0, el.attr('scrollWidth')];
+		return [-(el.get(0).scrollWidth - vp.sizeX), 0];
 	},
 
 	scrollHeight : function(el, vp)
 	{
-		return [0, el.attr('scrollHeight')];
+		return [0, el.get(0).scrollHeight - vp.sizeY];
 	},
 
 	fontSize : function(el, vp)
@@ -190,7 +189,7 @@ jcparallax.Layer.rangeCalculators = {
 
 	lineHeight : function(el, vp)
 	{
-		return [0, el.css('line-height')];
+		return [el.css('line-height'), 0];
 	},
 
 	opacity : function(el, vp)

jcp-viewport.js

@@ -38,7 +38,7 @@ jcparallax.Viewport = function(el, options, layerOptions)
 	};
 
 	// determine layer movement ranges if set to automatic
-	this.options = jcparallax.Viewport._calcMovementRanges($.extend(true, defaults, options));
+	this.options = jcparallax.Viewport._inferMovementRanges($.extend(true, defaults, options));
 
 	// set layer opts for passing on to child layers
 	this.layerOptions = layerOptions;
@@ -81,7 +81,7 @@ $.extend(jcparallax.Viewport, {
 	 * @param  {object} options incoming options object
 	 * @return the processed options
 	 */
-	_calcMovementRanges : function(options)
+	_inferMovementRanges : function(options)
 	{
 		// set default range calculation callbacks
 		if (options.movementRangeX === true || options.movementRangeY === true && !$.isFunction(options.animHandler)) {
@@ -93,23 +93,23 @@ $.extend(jcparallax.Viewport, {
 				case 'background':
 				case 'stretch':
 					switch (options.inputHandler) {
-						case 'mousemove':
-							options.movementRangeX = 'width';
-							options.movementRangeY = 'height';
-							break;
 						case 'scroll':
-							options.movementRangeX = 'scrollWidth';
-							options.movementRangeY = 'scrollHeight';
+							options.movementRangeX = jcparallax.Layer.rangeCalculators.scrollWidth;
+							options.movementRangeY = jcparallax.Layer.rangeCalculators.scrollHeight;
+							break;
+						default:
+							options.movementRangeX = jcparallax.Layer.rangeCalculators.width;
+							options.movementRangeY = jcparallax.Layer.rangeCalculators.height;
 							break;
 					}
 					break;
 				case 'textShadow':
-					options.movementRangeX = 'fontSize';
-					options.movementRangeY = 'lineHeight';
+					options.movementRangeX = jcparallax.Layer.rangeCalculators.fontSize;
+					options.movementRangeY = jcparallax.Layer.rangeCalculators.lineHeight;
 					break;
 				case 'opacity':
-					options.movementRangeX = 0;
-					options.movementRangeY = 'opacity';
+					options.movementRangeX = [0, 0];
+					options.movementRangeY = jcparallax.Layer.rangeCalculators.opacity;
 					break;
 			}
 		}
@@ -146,7 +146,6 @@ $.extend(jcparallax.Viewport.prototype, {
 	bindEvent : function(eventName, handler)
 	{
 		var that = this;
-
 		eventName += jcparallax.eventNamespace;
 
 		// detach old callback first if present
@@ -246,8 +245,8 @@ $.extend(jcparallax.Viewport.prototype, {
 		this.offsetY = offset.top;
 		this.sizeX = this.element.width();
 		this.sizeY = this.element.height();
-		this.scrollX = this.element.attr('scrollWidth');
-		this.scrollY = this.element.attr('scrollHeight');
+		this.scrollX = this.element[0].scrollWidth - this.sizeX;
+		this.scrollY = this.element[0].scrollHeight - this.sizeY;
 
 		if (this.layers) {
 			$.each(this.layers, function(i, layer) {
@@ -294,7 +293,8 @@ jcparallax.Viewport.inputHandlers = {
 		var xPos = el.scrollLeft(),
 			yPos = el.scrollTop();
 
-		this.updateLastSamplePos(xPos / this.scrollX, yPos / this.scrollY);
+		// :NOTE: scroll offsets are often calculated smaller than the available space due to scrollbar space
+		this.updateLastSamplePos(this.scrollX ? Math.min(1, xPos / this.scrollX) : 0, this.scrollY ? Math.min(1, yPos / this.scrollY) : 0);
 	},
 
 	click : function(el, evt)

jcparallax.css

@@ -2,6 +2,9 @@
 	position: relative;
 	overflow: hidden;
 }
+.jcp-viewport.scroll {
+	overflow: auto;
+}
 .jcp-layer {
 	position: absolute;
 	/* :NOTE: you will need to override these timings if changing the default frame duration in jc-parallax.js */