universal-parallax - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

dist/universal-parallax.js

 'use strict';
 
 /**
-* @version 1.2.1
+* @version 1.3.0
 * @author Marius Hansen <[e-mail]>
 * @license MIT
 * @description Easy parallax plugin using pure javascript. Cross browser support, including mobile platforms. Based on goodparallax
-* @copyright © Marius Hansen 2018
+* @copyright © Marius Hansen 2019
 */
@@ -27,9 +27,9 @@
 // position parallax
-function positionParallax(container, speed, parallax, elem) {
+var positionParallax = function positionParallax(container, speed, parallax, elem) {
 	var bgScroll = container.top / speed - windowHeightExtra;
 	parallax[elem].style.top = bgScroll + 'px';
-}
+};
 
 // animate parallax
-function animateParallax(parallax, speed) {
+var animateParallax = function animateParallax(parallax, speed) {
 	for (var i = 0; parallax.length > i; i++) {
@@ -42,15 +42,18 @@ var container = parallax[i].parentElement.parentElement.getBoundingClientRect();
 	}
-}
+};
 
 // determine height
-function calculateHeight(parallax, speed) {
+var calculateHeight = function calculateHeight(parallax, speed) {
 	for (var i = 0; parallax.length > i; i++) {
 		var container = parallax[i].parentElement.parentElement.getBoundingClientRect();
+		var containerTop = parallax[i].parentElement.parentElement.offsetTop;
 		var elemOffsetTop = (windowHeight - container.height) / 2;
-		var bgHeight = container.height + (elemOffsetTop - elemOffsetTop / speed) * 2;
 
+		// set bgHeight & check if it needs to stretch beyond container bottom
+		var bgHeight = windowHeight > container.height + containerTop ? container.height + containerTop - containerTop / speed : container.height + (elemOffsetTop - elemOffsetTop / speed) * 2;
+
 		parallax[i].style.height = bgHeight + windowHeightExtra * 2 + 'px';
 		positionParallax(container, speed, parallax, i);
 	}
-}
+};
 
@@ -102,3 +105,3 @@ var universalParallax = function universalParallax() {
 
-			// // parent elem need position: relative for effect to work - if not already defined, add it
+			// parent elem need position: relative for effect to work - if not already defined, add it
 			if (window.getComputedStyle(parallaxContainer.parentElement, null).getPropertyValue('position') !== 'relative') {
@@ -114,7 +117,5 @@ parallaxContainer.parentElement.style.position = 'relative';
 				if (parallax[i].classList.length === 1 && parallax[i].classList[0] === 'parallax') {
-					Object.assign(parallax[i].style, {
-						'background-repeat': 'no-repeat',
-						'background-position': 'center',
-						'background-size': 'cover'
-					});
+					parallax[i].style.backgroundRepeat = 'no-repeat';
+					parallax[i].style.backgroundPosition = 'center';
+					parallax[i].style.backgroundSize = 'cover';
 				}
@@ -121,0 +122,0 @@ }

dist/universal-parallax.min.js

@@ -1,1 +0,1 @@
-"use strict";var windowHeight=window.innerHeight,windowHeightExtra=0,safari=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),mobile=/Mobi/.test(navigator.userAgent);function positionParallax(e,t,a,i){var n=e.top/t-windowHeightExtra;a[i].style.top=n+"px"}function animateParallax(e,t){for(var a=0;e.length>a;a++){var i=e[a].parentElement.parentElement.getBoundingClientRect();i.top+i.height>=0&&i.top<=windowHeight&&positionParallax(i,t,e,a)}}function calculateHeight(e,t){for(var a=0;e.length>a;a++){var i=e[a].parentElement.parentElement.getBoundingClientRect(),n=(windowHeight-i.height)/2,o=i.height+2*(n-n/t);e[a].style.height=o+2*windowHeightExtra+"px",positionParallax(i,t,e,a)}}safari&&!mobile&&(windowHeightExtra=window.outerHeight-window.innerHeight),mobile&&(windowHeight=window.screen.availHeight,windowHeightExtra=(window.screen.availHeight-window.innerHeight)/2);var universalParallax=function(){this.init=function(e){void 0===e&&(e={}),e={speed:void 0!==e.speed?e.speed:1.5,className:void 0!==e.className?e.className:"parallax"};for(var t,a,i=document.getElementsByClassName(e.className),n=0;i.length>n;n++){var o=document.createElement("div");i[n].parentNode.insertBefore(o,i[n]),o.appendChild(i[n]);var r=i[n].parentElement;r.className+="parallax__container","relative"!==window.getComputedStyle(r.parentElement,null).getPropertyValue("position")&&(r.parentElement.style.position="relative");var l=i[n].dataset.parallaxImage;void 0!==l&&(i[n].style.backgroundImage="url("+l+")",1===i[n].classList.length&&"parallax"===i[n].classList[0]&&Object.assign(i[n].style,{"background-repeat":"no-repeat","background-position":"center","background-size":"cover"}))}t=i,(a=e.speed)<1&&(a=1),calculateHeight(t,a),mobile||window.addEventListener("resize",function(){windowHeight=window.innerHeight,calculateHeight(t,a)}),window.addEventListener("scroll",function(){animateParallax(t,a)})}};
+"use strict";var windowHeight=window.innerHeight,windowHeightExtra=0,safari=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),mobile=/Mobi/.test(navigator.userAgent);safari&&!mobile&&(windowHeightExtra=window.outerHeight-window.innerHeight),mobile&&(windowHeight=window.screen.availHeight,windowHeightExtra=(window.screen.availHeight-window.innerHeight)/2);var positionParallax=function(e,t,a,i){var n=e.top/t-windowHeightExtra;a[i].style.top=n+"px"},animateParallax=function(e,t){for(var a=0;e.length>a;a++){var i=e[a].parentElement.parentElement.getBoundingClientRect();i.top+i.height>=0&&i.top<=windowHeight&&positionParallax(i,t,e,a)}},calculateHeight=function(e,t){for(var a=0;e.length>a;a++){var i=e[a].parentElement.parentElement.getBoundingClientRect(),n=e[a].parentElement.parentElement.offsetTop,o=(windowHeight-i.height)/2,r=windowHeight>i.height+n?i.height+n-n/t:i.height+2*(o-o/t);e[a].style.height=r+2*windowHeightExtra+"px",positionParallax(i,t,e,a)}},universalParallax=function(){this.init=function(e){void 0===e&&(e={}),e={speed:void 0!==e.speed?e.speed:1.5,className:void 0!==e.className?e.className:"parallax"};for(var t,a,i=document.getElementsByClassName(e.className),n=0;i.length>n;n++){var o=document.createElement("div");i[n].parentNode.insertBefore(o,i[n]),o.appendChild(i[n]);var r=i[n].parentElement;r.className+="parallax__container","relative"!==window.getComputedStyle(r.parentElement,null).getPropertyValue("position")&&(r.parentElement.style.position="relative");var l=i[n].dataset.parallaxImage;void 0!==l&&(i[n].style.backgroundImage="url("+l+")",1===i[n].classList.length&&"parallax"===i[n].classList[0]&&(i[n].style.backgroundRepeat="no-repeat",i[n].style.backgroundPosition="center",i[n].style.backgroundSize="cover"))}t=i,(a=e.speed)<1&&(a=1),calculateHeight(t,a),mobile||window.addEventListener("resize",function(){windowHeight=window.innerHeight,calculateHeight(t,a)}),window.addEventListener("scroll",function(){animateParallax(t,a)})}};

package.json

 {
     "name": "universal-parallax",
-    "version": "1.2.2",
+    "version": "1.3.0",
     "description": "Easy parallax plugin using pure javascript. Lightweight (2kb) and cross browser compatibility - including mobile platforms (iOS, Android).",
@@ -5,0 +5,0 @@ "main": "dist/universal-parallax.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1812753

increased by0.16%

Number of package files

17

increased by6.25%

No dependency changes