From 0221f17fc02d90275f3ee1a3ec85b7e7a059624e Mon Sep 17 00:00:00 2001 From: Patrick Nelson Date: Wed, 11 May 2016 17:55:23 -0700 Subject: [PATCH] FIX for #88: Address decay issues, passing animation back to 'pointerOffTarget' when mouse moves back away from target. --- js/jquery.parallax.js | 72 ++++++++++++++++++++++++------------------- 1 file changed, 41 insertions(+), 31 deletions(-) diff --git a/js/jquery.parallax.js b/js/jquery.parallax.js index fa15d8f..54b8306 100644 --- a/js/jquery.parallax.js +++ b/js/jquery.parallax.js @@ -346,7 +346,7 @@ return css; } - function pointerOffTarget(targetPointer, prevPointer, threshold, decay, parallax, targetFn, updateFn) { + function pointerOffTarget(targetPointer, prevPointer, threshold, decay, parallax, targetFn, updateFn, portElem) { var pointer, x; if ((!parallax[0] || Math.abs(targetPointer[0] - prevPointer[0]) < threshold[0]) && @@ -369,13 +369,14 @@ return updateFn(pointer); } - function pointerOnTarget(targetPointer, prevPointer, threshold, decay, parallax, targetFn, updateFn) { + function pointerOnTarget(targetPointer, prevPointer, threshold, decay, parallax, targetFn, updateFn, portElem) { // Don't bother updating if the pointer hasn't changed. if (targetPointer[0] === prevPointer[0] && targetPointer[1] === prevPointer[1]) { return; } - - return updateFn(targetPointer); + + // Pass the responsibility for updating back to "pointerOffTarget" now that we're off the target again. + portElem.trigger('parallax.setPointerFn', [pointerOffTarget]); } function unport(elem, events, winEvents) { @@ -422,32 +423,38 @@ return this.each(function(i) { var node = this, - elem = jQuery(this), - opts = args[i + 1] ? jQuery.extend({}, options, args[i + 1]) : options, - decay = opts.decay, - size = layerSize(elem, opts.width, opts.height), - origin = layerOrigin(opts.xorigin, opts.yorigin), - px = layerPx(opts.xparallax, opts.yparallax), - parallax = layerParallax(opts.xparallax, opts.yparallax, px), - offset = layerOffset(parallax, px, origin, size), - position = layerPosition(px, origin), - pointer = layerPointer(elem, parallax, px, offset, size), - pointerFn = pointerOffTarget, - targetFn = targetInside, - events = { - 'mouseenter.parallax': function mouseenter(e) { - pointerFn = pointerOffTarget; - targetFn = targetInside; - timer.add(frame); - timer.start(); - }, - 'mouseleave.parallax': function mouseleave(e) { - // Make the layer come to rest at it's limit with inertia - pointerFn = pointerOffTarget; - // Stop the timer when the the pointer hits target - targetFn = targetOutside; - } - }; + elem = jQuery(this), + opts = args[i + 1] ? jQuery.extend({}, options, args[i + 1]) : options, + decay = opts.decay, + size = layerSize(elem, opts.width, opts.height), + origin = layerOrigin(opts.xorigin, opts.yorigin), + px = layerPx(opts.xparallax, opts.yparallax), + parallax = layerParallax(opts.xparallax, opts.yparallax, px), + offset = layerOffset(parallax, px, origin, size), + position = layerPosition(px, origin), + pointer = layerPointer(elem, parallax, px, offset, size), + pointerFn = pointerOffTarget, + targetFn = targetInside, + events = { + 'mouseenter.parallax': function mouseenter(e) { + pointerFn = pointerOffTarget; + targetFn = targetInside; + timer.add(frame); + timer.start(); + }, + + 'mouseleave.parallax': function mouseleave(e) { + // Make the layer come to rest at it's limit with inertia + pointerFn = pointerOffTarget; + // Stop the timer when the the pointer hits target + targetFn = targetOutside; + }, + + // TODO: Needed to set this up as an event listener due to scope issues. + 'parallax.setPointerFn': function setPointerFn(e, newPointerFn) { + pointerFn = newPointerFn; + } + }; function updateCss(newPointer) { var css = layerCss(parallax, px, offset, size, position, newPointer); @@ -456,7 +463,10 @@ } function frame() { - pointerFn(port.pointer, pointer, port.threshold, decay, parallax, targetFn, updateCss); + // TODO: Might make sense to eventually refactor calls to pointerFN to simply pass the port instance. + // TODO: Also to have the entire initialization to be based on a jQuery set of just the port [port] and + // TODO: pass the layers as an option instead of the other way around, i.e. [layer, layer, ...] + pointerFn(port.pointer, pointer, port.threshold, decay, parallax, targetFn, updateCss, elem); } function targetInside() {