From 30d7637757cd5e1d587808703279effb6b020246 Mon Sep 17 00:00:00 2001 From: Carlos Villalobos Date: Mon, 21 Mar 2022 16:34:39 -0600 Subject: [PATCH 1/4] Update rellax.js Adding new property switch called 'leadByViewPort' to manage if the animation should only happen when the element is within the ViewPort area. --- rellax.js | 226 +++++++++++++++++++++++++++++------------------------- 1 file changed, 123 insertions(+), 103 deletions(-) diff --git a/rellax.js b/rellax.js index cd70557..ee158c2 100644 --- a/rellax.js +++ b/rellax.js @@ -23,7 +23,7 @@ root.Rellax = factory(); } }(typeof window !== "undefined" ? window : global, function () { - var Rellax = function(el, options){ + var Rellax = function (el, options) { "use strict"; var self = Object.create(Rellax.prototype); @@ -42,7 +42,7 @@ window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || - function(callback){ return setTimeout(callback, 1000 / 60); }; + function (callback) { return setTimeout(callback, 1000 / 60); }; // store the id for later use var loopId = null; @@ -51,36 +51,36 @@ var supportsPassive = false; try { var opts = Object.defineProperty({}, 'passive', { - get: function() { + get: function () { supportsPassive = true; } }); window.addEventListener("testPassive", null, opts); window.removeEventListener("testPassive", null, opts); - } catch (e) {} + } catch (e) { } // check what cancelAnimation method to use var clearLoop = window.cancelAnimationFrame || window.mozCancelAnimationFrame || clearTimeout; // check which transform property to use - var transformProp = window.transformProp || (function(){ - var testEl = document.createElement('div'); - if (testEl.style.transform === null) { - var vendors = ['Webkit', 'Moz', 'ms']; - for (var vendor in vendors) { - if (testEl.style[ vendors[vendor] + 'Transform' ] !== undefined) { - return vendors[vendor] + 'Transform'; - } + var transformProp = window.transformProp || (function () { + var testEl = document.createElement('div'); + if (testEl.style.transform === null) { + var vendors = ['Webkit', 'Moz', 'ms']; + for (var vendor in vendors) { + if (testEl.style[vendors[vendor] + 'Transform'] !== undefined) { + return vendors[vendor] + 'Transform'; } } - return 'transform'; - })(); + } + return 'transform'; + })(); // Default Settings self.options = { speed: -2, - verticalSpeed: null, - horizontalSpeed: null, + verticalSpeed: null, + horizontalSpeed: null, breakpoints: [576, 768, 1201], center: false, wrapper: null, @@ -90,17 +90,18 @@ horizontal: false, verticalScrollAxis: "y", horizontalScrollAxis: "x", - callback: function() {}, + leadByViewPort: false, + callback: function () { }, }; // User defined options (might have more in the future) - if (options){ - Object.keys(options).forEach(function(key){ + if (options) { + Object.keys(options).forEach(function (key) { self.options[key] = options[key]; }); } - function validateCustomBreakpoints () { + function validateCustomBreakpoints() { if (self.options.breakpoints.length === 3 && Array.isArray(self.options.breakpoints)) { var isAscending = true; var isNumerical = true; @@ -169,8 +170,8 @@ }; // Get and cache initial position of all elements - var cacheBlocks = function() { - for (var i = 0; i < self.elems.length; i++){ + var cacheBlocks = function () { + for (var i = 0; i < self.elems.length; i++) { var block = createBlock(self.elems[i]); blocks.push(block); } @@ -179,8 +180,8 @@ // Let's kick this script off // Build array for cached element values - var init = function() { - for (var i = 0; i < blocks.length; i++){ + var init = function () { + for (var i = 0; i < blocks.length; i++) { self.elems[i].style.cssText = blocks[i].style; } @@ -208,20 +209,20 @@ // We want to cache the parallax blocks' // values: base, top, height, speed // el: is dom object, return: el cache values - var createBlock = function(el) { - var dataPercentage = el.getAttribute( 'data-rellax-percentage' ); - var dataSpeed = el.getAttribute( 'data-rellax-speed' ); - var dataXsSpeed = el.getAttribute( 'data-rellax-xs-speed' ); - var dataMobileSpeed = el.getAttribute( 'data-rellax-mobile-speed' ); - var dataTabletSpeed = el.getAttribute( 'data-rellax-tablet-speed' ); - var dataDesktopSpeed = el.getAttribute( 'data-rellax-desktop-speed' ); + var createBlock = function (el) { + var dataPercentage = el.getAttribute('data-rellax-percentage'); + var dataSpeed = el.getAttribute('data-rellax-speed'); + var dataXsSpeed = el.getAttribute('data-rellax-xs-speed'); + var dataMobileSpeed = el.getAttribute('data-rellax-mobile-speed'); + var dataTabletSpeed = el.getAttribute('data-rellax-tablet-speed'); + var dataDesktopSpeed = el.getAttribute('data-rellax-desktop-speed'); var dataVerticalSpeed = el.getAttribute('data-rellax-vertical-speed'); var dataHorizontalSpeed = el.getAttribute('data-rellax-horizontal-speed'); var dataVericalScrollAxis = el.getAttribute('data-rellax-vertical-scroll-axis'); var dataHorizontalScrollAxis = el.getAttribute('data-rellax-horizontal-scroll-axis'); - var dataZindex = el.getAttribute( 'data-rellax-zindex' ) || 0; - var dataMin = el.getAttribute( 'data-rellax-min' ); - var dataMax = el.getAttribute( 'data-rellax-max' ); + var dataZindex = el.getAttribute('data-rellax-zindex') || 0; + var dataMin = el.getAttribute('data-rellax-min'); + var dataMax = el.getAttribute('data-rellax-max'); var dataMinX = el.getAttribute('data-rellax-min-x'); var dataMaxX = el.getAttribute('data-rellax-max-x'); var dataMinY = el.getAttribute('data-rellax-min-y'); @@ -251,8 +252,8 @@ var scrollPosY = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop); wrapperPosY = scrollPosY - self.options.wrapper.offsetTop; } - var posY = self.options.vertical ? ( dataPercentage || self.options.center ? wrapperPosY : 0 ) : 0; - var posX = self.options.horizontal ? ( dataPercentage || self.options.center ? self.options.wrapper ? self.options.wrapper.scrollLeft : (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft) : 0 ) : 0; + var posY = self.options.vertical ? (dataPercentage || self.options.center ? wrapperPosY : 0) : 0; + var posX = self.options.horizontal ? (dataPercentage || self.options.center ? self.options.wrapper ? self.options.wrapper.scrollLeft : (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft) : 0) : 0; var blockTop = posY + el.getBoundingClientRect().top; var blockHeight = el.clientHeight || el.offsetHeight || el.scrollHeight; @@ -263,7 +264,7 @@ // apparently parallax equation everyone uses var percentageY = dataPercentage ? dataPercentage : (posY - blockTop + screenY) / (blockHeight + screenY); var percentageX = dataPercentage ? dataPercentage : (posX - blockLeft + screenX) / (blockWidth + screenX); - if(self.options.center){ percentageX = 0.5; percentageY = 0.5; } + if (self.options.center) { percentageX = 0.5; percentageY = 0.5; } // Optional individual block speed as data attr, otherwise global speed var speed = (breakpoints && mapBreakpoints[currentBreakpoint] !== null) ? Number(mapBreakpoints[currentBreakpoint]) : (dataSpeed ? dataSpeed : self.options.speed); @@ -293,9 +294,9 @@ // Remove "transform" string and save the attribute if (delimiter) { - transform = " " + trimmedStyle.slice(11, delimiter).replace(/\s/g,''); + transform = " " + trimmedStyle.slice(11, delimiter).replace(/\s/g, ''); } else { - transform = " " + trimmedStyle.slice(11).replace(/\s/g,''); + transform = " " + trimmedStyle.slice(11).replace(/\s/g, ''); } } @@ -326,7 +327,7 @@ // set scroll position (posY, posX) // side effect method is not ideal, but okay for now // returns true if the scroll changed, false if nothing happened - var setPosition = function() { + var setPosition = function () { var oldY = posY; var oldX = posX; @@ -356,7 +357,7 @@ // Ahh a pure function, gets new transform value // based on scrollPosition and speed // Allow for decimal pixel values - var updatePosition = function(percentageX, percentageY, speed, verticalSpeed, horizontalSpeed) { + var updatePosition = function (percentageX, percentageY, speed, verticalSpeed, horizontalSpeed) { var result = {}; var valueX = ((horizontalSpeed ? horizontalSpeed : speed) * (100 * (1 - percentageX))); var valueY = ((verticalSpeed ? verticalSpeed : speed) * (100 * (1 - percentageY))); @@ -368,7 +369,7 @@ }; // Remove event listeners and loop again - var deferredUpdate = function() { + var deferredUpdate = function () { window.removeEventListener('resize', deferredUpdate); window.removeEventListener('orientationchange', deferredUpdate); (self.options.wrapper ? self.options.wrapper : window).removeEventListener('scroll', deferredUpdate); @@ -379,7 +380,7 @@ }; // Loop - var update = function() { + var update = function () { if (setPosition() && pause === false) { animate(); @@ -396,81 +397,100 @@ } }; + // Checks if the target element to animate is within the ViewPort area + // Used when the attribute 'leadByViewPort' is true. + $.fn.isInViewport = function () { + var elementTop = $(this).offset().top - 100; + var elementBottom = elementTop + $(this).outerHeight() - 260; + + var viewportTop = $(window).scrollTop(); + var viewportBottom = viewportTop + $(window).height(); + + if (elementBottom > viewportTop && elementTop < viewportBottom) { + return true; + } + else { + return false; + } + }; + // Transform3d on parallax element - var animate = function() { - var positions; - for (var i = 0; i < self.elems.length; i++){ - // Determine relevant movement directions - var verticalScrollAxis = blocks[i].verticalScrollAxis.toLowerCase(); - var horizontalScrollAxis = blocks[i].horizontalScrollAxis.toLowerCase(); - var verticalScrollX = verticalScrollAxis.indexOf("x") != -1 ? posY : 0; - var verticalScrollY = verticalScrollAxis.indexOf("y") != -1 ? posY : 0; - var horizontalScrollX = horizontalScrollAxis.indexOf("x") != -1 ? posX : 0; - var horizontalScrollY = horizontalScrollAxis.indexOf("y") != -1 ? posX : 0; - - var percentageY = ((verticalScrollY + horizontalScrollY - blocks[i].top + screenY) / (blocks[i].height + screenY)); - var percentageX = ((verticalScrollX + horizontalScrollX - blocks[i].left + screenX) / (blocks[i].width + screenX)); - - // Subtracting initialize value, so element stays in same spot as HTML - positions = updatePosition(percentageX, percentageY, blocks[i].speed, blocks[i].verticalSpeed, blocks[i].horizontalSpeed); - var positionY = positions.y - blocks[i].baseY; - var positionX = positions.x - blocks[i].baseX; - - // The next two "if" blocks go like this: - // Check if a limit is defined (first "min", then "max"); - // Check if we need to change the Y or the X - // (Currently working only if just one of the axes is enabled) - // Then, check if the new position is inside the allowed limit - // If so, use new position. If not, set position to limit. - - // Check if a min limit is defined - if (blocks[i].min !== null) { - if (self.options.vertical && !self.options.horizontal) { - positionY = positionY <= blocks[i].min ? blocks[i].min : positionY; - } - if (self.options.horizontal && !self.options.vertical) { - positionX = positionX <= blocks[i].min ? blocks[i].min : positionX; + var animate = function () { + if ((!self.options.leadByViewPort) || (self.options.leadByViewPort && $('#parallax-wrapper').isInViewport())) { + var positions; + for (var i = 0; i < self.elems.length; i++) { + // Determine relevant movement directions + var verticalScrollAxis = blocks[i].verticalScrollAxis.toLowerCase(); + var horizontalScrollAxis = blocks[i].horizontalScrollAxis.toLowerCase(); + var verticalScrollX = verticalScrollAxis.indexOf("x") != -1 ? posY : 0; + var verticalScrollY = verticalScrollAxis.indexOf("y") != -1 ? posY : 0; + var horizontalScrollX = horizontalScrollAxis.indexOf("x") != -1 ? posX : 0; + var horizontalScrollY = horizontalScrollAxis.indexOf("y") != -1 ? posX : 0; + + var percentageY = ((verticalScrollY + horizontalScrollY - blocks[i].top + screenY) / (blocks[i].height + screenY)); + var percentageX = ((verticalScrollX + horizontalScrollX - blocks[i].left + screenX) / (blocks[i].width + screenX)); + + // Subtracting initialize value, so element stays in same spot as HTML + positions = updatePosition(percentageX, percentageY, blocks[i].speed, blocks[i].verticalSpeed, blocks[i].horizontalSpeed); + var positionY = positions.y - blocks[i].baseY; + var positionX = positions.x - blocks[i].baseX; + + // The next two "if" blocks go like this: + // Check if a limit is defined (first "min", then "max"); + // Check if we need to change the Y or the X + // (Currently working only if just one of the axes is enabled) + // Then, check if the new position is inside the allowed limit + // If so, use new position. If not, set position to limit. + + // Check if a min limit is defined + if (blocks[i].min !== null) { + if (self.options.vertical && !self.options.horizontal) { + positionY = positionY <= blocks[i].min ? blocks[i].min : positionY; + } + if (self.options.horizontal && !self.options.vertical) { + positionX = positionX <= blocks[i].min ? blocks[i].min : positionX; + } } - } - // Check if directional min limits are defined - if (blocks[i].minY != null) { + // Check if directional min limits are defined + if (blocks[i].minY != null) { positionY = positionY <= blocks[i].minY ? blocks[i].minY : positionY; - } - if (blocks[i].minX != null) { + } + if (blocks[i].minX != null) { positionX = positionX <= blocks[i].minX ? blocks[i].minX : positionX; - } - - // Check if a max limit is defined - if (blocks[i].max !== null) { - if (self.options.vertical && !self.options.horizontal) { - positionY = positionY >= blocks[i].max ? blocks[i].max : positionY; } - if (self.options.horizontal && !self.options.vertical) { - positionX = positionX >= blocks[i].max ? blocks[i].max : positionX; + + // Check if a max limit is defined + if (blocks[i].max !== null) { + if (self.options.vertical && !self.options.horizontal) { + positionY = positionY >= blocks[i].max ? blocks[i].max : positionY; + } + if (self.options.horizontal && !self.options.vertical) { + positionX = positionX >= blocks[i].max ? blocks[i].max : positionX; + } } - } - // Check if directional max limits are defined - if (blocks[i].maxY != null) { + // Check if directional max limits are defined + if (blocks[i].maxY != null) { positionY = positionY >= blocks[i].maxY ? blocks[i].maxY : positionY; - } - if (blocks[i].maxX != null) { + } + if (blocks[i].maxX != null) { positionX = positionX >= blocks[i].maxX ? blocks[i].maxX : positionX; - } + } - var zindex = blocks[i].zindex; + var zindex = blocks[i].zindex; - // Move that element - // (Set the new translation and append initial inline transforms.) - var translate = 'translate3d(' + (self.options.horizontal ? positionX : '0') + 'px,' + (self.options.vertical ? positionY : '0') + 'px,' + zindex + 'px) ' + blocks[i].transform; - self.elems[i].style[transformProp] = translate; + // Move that element + // (Set the new translation and append initial inline transforms.) + var translate = 'translate3d(' + (self.options.horizontal ? positionX : '0') + 'px,' + (self.options.vertical ? positionY : '0') + 'px,' + zindex + 'px) ' + blocks[i].transform; + self.elems[i].style[transformProp] = translate; + } + self.options.callback(positions); } - self.options.callback(positions); }; - self.destroy = function() { - for (var i = 0; i < self.elems.length; i++){ + self.destroy = function () { + for (var i = 0; i < self.elems.length; i++) { self.elems[i].style.cssText = blocks[i].style; } From fb27e64880371776bf93fe025a5c9d1268729bdc Mon Sep 17 00:00:00 2001 From: Carlos Villalobos Date: Tue, 22 Mar 2022 10:57:14 -0600 Subject: [PATCH 2/4] Update rellax.js - Removing use of JQuery from the library as previous suggestion was using the $. dependency. - Also removing hardwire value referencing the id of an element. --- rellax.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/rellax.js b/rellax.js index ee158c2..f95bb4d 100644 --- a/rellax.js +++ b/rellax.js @@ -399,9 +399,9 @@ // Checks if the target element to animate is within the ViewPort area // Used when the attribute 'leadByViewPort' is true. - $.fn.isInViewport = function () { - var elementTop = $(this).offset().top - 100; - var elementBottom = elementTop + $(this).outerHeight() - 260; + var isInViewport = function (e) { + var elementTop = $(e).offset().top - 100; + var elementBottom = elementTop + $(e).outerHeight() - 260; var viewportTop = $(window).scrollTop(); var viewportBottom = viewportTop + $(window).height(); @@ -416,7 +416,7 @@ // Transform3d on parallax element var animate = function () { - if ((!self.options.leadByViewPort) || (self.options.leadByViewPort && $('#parallax-wrapper').isInViewport())) { + if ((!self.options.leadByViewPort) || (self.options.leadByViewPort && isInViewport(self.elems[0].parentNode))) { var positions; for (var i = 0; i < self.elems.length; i++) { // Determine relevant movement directions From 03556fb43718f43ac0a52a2bb5642bf9d6b6ef16 Mon Sep 17 00:00:00 2001 From: Carlos Villalobos Date: Tue, 22 Mar 2022 11:10:01 -0600 Subject: [PATCH 3/4] Update rellax.js Removing more $ dependencies --- rellax.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/rellax.js b/rellax.js index f95bb4d..b37da1f 100644 --- a/rellax.js +++ b/rellax.js @@ -400,11 +400,12 @@ // Checks if the target element to animate is within the ViewPort area // Used when the attribute 'leadByViewPort' is true. var isInViewport = function (e) { - var elementTop = $(e).offset().top - 100; - var elementBottom = elementTop + $(e).outerHeight() - 260; + var container = e.getBoundingClientRect(); + var elementTop = (container.top + window.scrollY) - 100; + var elementBottom = elementTop + window.outerHeight - 260; - var viewportTop = $(window).scrollTop(); - var viewportBottom = viewportTop + $(window).height(); + var viewportTop = document.documentElement.scrollTop; + var viewportBottom = viewportTop + window.screen.height; if (elementBottom > viewportTop && elementTop < viewportBottom) { return true; From f0651110bad8858a676fd35da638c7b812c3e7a4 Mon Sep 17 00:00:00 2001 From: Carlos Villalobos Date: Tue, 22 Mar 2022 11:23:12 -0600 Subject: [PATCH 4/4] Update rellax.js Removing formatting changes. --- rellax.js | 122 +++++++++++++++++++++++++++--------------------------- 1 file changed, 61 insertions(+), 61 deletions(-) diff --git a/rellax.js b/rellax.js index b37da1f..4854200 100644 --- a/rellax.js +++ b/rellax.js @@ -23,7 +23,7 @@ root.Rellax = factory(); } }(typeof window !== "undefined" ? window : global, function () { - var Rellax = function (el, options) { + var Rellax = function(el, options){ "use strict"; var self = Object.create(Rellax.prototype); @@ -42,7 +42,7 @@ window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || - function (callback) { return setTimeout(callback, 1000 / 60); }; + function(callback){ return setTimeout(callback, 1000 / 60); }; // store the id for later use var loopId = null; @@ -51,30 +51,30 @@ var supportsPassive = false; try { var opts = Object.defineProperty({}, 'passive', { - get: function () { + get: function() { supportsPassive = true; } }); window.addEventListener("testPassive", null, opts); window.removeEventListener("testPassive", null, opts); - } catch (e) { } + } catch (e) {} // check what cancelAnimation method to use var clearLoop = window.cancelAnimationFrame || window.mozCancelAnimationFrame || clearTimeout; // check which transform property to use - var transformProp = window.transformProp || (function () { - var testEl = document.createElement('div'); - if (testEl.style.transform === null) { - var vendors = ['Webkit', 'Moz', 'ms']; - for (var vendor in vendors) { - if (testEl.style[vendors[vendor] + 'Transform'] !== undefined) { - return vendors[vendor] + 'Transform'; + var transformProp = window.transformProp || (function(){ + var testEl = document.createElement('div'); + if (testEl.style.transform === null) { + var vendors = ['Webkit', 'Moz', 'ms']; + for (var vendor in vendors) { + if (testEl.style[ vendors[vendor] + 'Transform' ] !== undefined) { + return vendors[vendor] + 'Transform'; + } } } - } - return 'transform'; - })(); + return 'transform'; + })(); // Default Settings self.options = { @@ -91,17 +91,17 @@ verticalScrollAxis: "y", horizontalScrollAxis: "x", leadByViewPort: false, - callback: function () { }, + callback: function() {}, }; // User defined options (might have more in the future) - if (options) { - Object.keys(options).forEach(function (key) { + if (options){ + Object.keys(options).forEach(function(key){ self.options[key] = options[key]; }); } - function validateCustomBreakpoints() { + function validateCustomBreakpoints () { if (self.options.breakpoints.length === 3 && Array.isArray(self.options.breakpoints)) { var isAscending = true; var isNumerical = true; @@ -170,8 +170,8 @@ }; // Get and cache initial position of all elements - var cacheBlocks = function () { - for (var i = 0; i < self.elems.length; i++) { + var cacheBlocks = function() { + for (var i = 0; i < self.elems.length; i++){ var block = createBlock(self.elems[i]); blocks.push(block); } @@ -180,8 +180,8 @@ // Let's kick this script off // Build array for cached element values - var init = function () { - for (var i = 0; i < blocks.length; i++) { + var init = function() { + for (var i = 0; i < blocks.length; i++){ self.elems[i].style.cssText = blocks[i].style; } @@ -209,20 +209,20 @@ // We want to cache the parallax blocks' // values: base, top, height, speed // el: is dom object, return: el cache values - var createBlock = function (el) { - var dataPercentage = el.getAttribute('data-rellax-percentage'); - var dataSpeed = el.getAttribute('data-rellax-speed'); - var dataXsSpeed = el.getAttribute('data-rellax-xs-speed'); - var dataMobileSpeed = el.getAttribute('data-rellax-mobile-speed'); - var dataTabletSpeed = el.getAttribute('data-rellax-tablet-speed'); - var dataDesktopSpeed = el.getAttribute('data-rellax-desktop-speed'); + var createBlock = function(el) { + var dataPercentage = el.getAttribute( 'data-rellax-percentage' ); + var dataSpeed = el.getAttribute( 'data-rellax-speed' ); + var dataXsSpeed = el.getAttribute( 'data-rellax-xs-speed' ); + var dataMobileSpeed = el.getAttribute( 'data-rellax-mobile-speed' ); + var dataTabletSpeed = el.getAttribute( 'data-rellax-tablet-speed' ); + var dataDesktopSpeed = el.getAttribute( 'data-rellax-desktop-speed' ); var dataVerticalSpeed = el.getAttribute('data-rellax-vertical-speed'); var dataHorizontalSpeed = el.getAttribute('data-rellax-horizontal-speed'); var dataVericalScrollAxis = el.getAttribute('data-rellax-vertical-scroll-axis'); var dataHorizontalScrollAxis = el.getAttribute('data-rellax-horizontal-scroll-axis'); - var dataZindex = el.getAttribute('data-rellax-zindex') || 0; - var dataMin = el.getAttribute('data-rellax-min'); - var dataMax = el.getAttribute('data-rellax-max'); + var dataZindex = el.getAttribute( 'data-rellax-zindex' ) || 0; + var dataMin = el.getAttribute( 'data-rellax-min' ); + var dataMax = el.getAttribute( 'data-rellax-max' ); var dataMinX = el.getAttribute('data-rellax-min-x'); var dataMaxX = el.getAttribute('data-rellax-max-x'); var dataMinY = el.getAttribute('data-rellax-min-y'); @@ -252,8 +252,8 @@ var scrollPosY = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop); wrapperPosY = scrollPosY - self.options.wrapper.offsetTop; } - var posY = self.options.vertical ? (dataPercentage || self.options.center ? wrapperPosY : 0) : 0; - var posX = self.options.horizontal ? (dataPercentage || self.options.center ? self.options.wrapper ? self.options.wrapper.scrollLeft : (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft) : 0) : 0; + var posY = self.options.vertical ? ( dataPercentage || self.options.center ? wrapperPosY : 0 ) : 0; + var posX = self.options.horizontal ? ( dataPercentage || self.options.center ? self.options.wrapper ? self.options.wrapper.scrollLeft : (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft) : 0 ) : 0; var blockTop = posY + el.getBoundingClientRect().top; var blockHeight = el.clientHeight || el.offsetHeight || el.scrollHeight; @@ -264,7 +264,7 @@ // apparently parallax equation everyone uses var percentageY = dataPercentage ? dataPercentage : (posY - blockTop + screenY) / (blockHeight + screenY); var percentageX = dataPercentage ? dataPercentage : (posX - blockLeft + screenX) / (blockWidth + screenX); - if (self.options.center) { percentageX = 0.5; percentageY = 0.5; } + if(self.options.center){ percentageX = 0.5; percentageY = 0.5; } // Optional individual block speed as data attr, otherwise global speed var speed = (breakpoints && mapBreakpoints[currentBreakpoint] !== null) ? Number(mapBreakpoints[currentBreakpoint]) : (dataSpeed ? dataSpeed : self.options.speed); @@ -294,9 +294,9 @@ // Remove "transform" string and save the attribute if (delimiter) { - transform = " " + trimmedStyle.slice(11, delimiter).replace(/\s/g, ''); + transform = " " + trimmedStyle.slice(11, delimiter).replace(/\s/g,''); } else { - transform = " " + trimmedStyle.slice(11).replace(/\s/g, ''); + transform = " " + trimmedStyle.slice(11).replace(/\s/g,''); } } @@ -327,7 +327,7 @@ // set scroll position (posY, posX) // side effect method is not ideal, but okay for now // returns true if the scroll changed, false if nothing happened - var setPosition = function () { + var setPosition = function() { var oldY = posY; var oldX = posX; @@ -357,7 +357,7 @@ // Ahh a pure function, gets new transform value // based on scrollPosition and speed // Allow for decimal pixel values - var updatePosition = function (percentageX, percentageY, speed, verticalSpeed, horizontalSpeed) { + var updatePosition = function(percentageX, percentageY, speed, verticalSpeed, horizontalSpeed) { var result = {}; var valueX = ((horizontalSpeed ? horizontalSpeed : speed) * (100 * (1 - percentageX))); var valueY = ((verticalSpeed ? verticalSpeed : speed) * (100 * (1 - percentageY))); @@ -369,7 +369,7 @@ }; // Remove event listeners and loop again - var deferredUpdate = function () { + var deferredUpdate = function() { window.removeEventListener('resize', deferredUpdate); window.removeEventListener('orientationchange', deferredUpdate); (self.options.wrapper ? self.options.wrapper : window).removeEventListener('scroll', deferredUpdate); @@ -380,7 +380,7 @@ }; // Loop - var update = function () { + var update = function() { if (setPosition() && pause === false) { animate(); @@ -400,26 +400,26 @@ // Checks if the target element to animate is within the ViewPort area // Used when the attribute 'leadByViewPort' is true. var isInViewport = function (e) { - var container = e.getBoundingClientRect(); - var elementTop = (container.top + window.scrollY) - 100; - var elementBottom = elementTop + window.outerHeight - 260; + var container = e.getBoundingClientRect(); + var elementTop = (container.top + window.scrollY); + var elementBottom = elementTop + window.outerHeight; - var viewportTop = document.documentElement.scrollTop; - var viewportBottom = viewportTop + window.screen.height; + var viewportTop = document.documentElement.scrollTop; + var viewportBottom = viewportTop + window.screen.height; - if (elementBottom > viewportTop && elementTop < viewportBottom) { - return true; - } - else { - return false; - } + if (elementBottom > viewportTop && elementTop < viewportBottom) { + return true; + } + else { + return false; + } }; // Transform3d on parallax element - var animate = function () { + var animate = function() { if ((!self.options.leadByViewPort) || (self.options.leadByViewPort && isInViewport(self.elems[0].parentNode))) { var positions; - for (var i = 0; i < self.elems.length; i++) { + for (var i = 0; i < self.elems.length; i++){ // Determine relevant movement directions var verticalScrollAxis = blocks[i].verticalScrollAxis.toLowerCase(); var horizontalScrollAxis = blocks[i].horizontalScrollAxis.toLowerCase(); @@ -455,10 +455,10 @@ // Check if directional min limits are defined if (blocks[i].minY != null) { - positionY = positionY <= blocks[i].minY ? blocks[i].minY : positionY; + positionY = positionY <= blocks[i].minY ? blocks[i].minY : positionY; } if (blocks[i].minX != null) { - positionX = positionX <= blocks[i].minX ? blocks[i].minX : positionX; + positionX = positionX <= blocks[i].minX ? blocks[i].minX : positionX; } // Check if a max limit is defined @@ -473,10 +473,10 @@ // Check if directional max limits are defined if (blocks[i].maxY != null) { - positionY = positionY >= blocks[i].maxY ? blocks[i].maxY : positionY; + positionY = positionY >= blocks[i].maxY ? blocks[i].maxY : positionY; } if (blocks[i].maxX != null) { - positionX = positionX >= blocks[i].maxX ? blocks[i].maxX : positionX; + positionX = positionX >= blocks[i].maxX ? blocks[i].maxX : positionX; } var zindex = blocks[i].zindex; @@ -490,8 +490,8 @@ } }; - self.destroy = function () { - for (var i = 0; i < self.elems.length; i++) { + self.destroy = function() { + for (var i = 0; i < self.elems.length; i++){ self.elems[i].style.cssText = blocks[i].style; } @@ -515,4 +515,4 @@ return self; }; return Rellax; -})); +})); \ No newline at end of file