universal-parallax - npm Package Compare versions

Comparing version 1.1.7 to 1.2.0

dist/universal-parallax.js

@@ -11,23 +11,24 @@ 'use strict';
 
-var windowHeight = window.innerHeight;
-if (/Mobi/.test(navigator.userAgent)) {
-	windowHeight = screen.height;
+var windowHeight = window.innerHeight,
+    windowHeightExtra = 0;
+var safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent),
+    mobile = /Mobi/.test(navigator.userAgent);
 
-	var mobileCss = document.createElement('style');
-	mobileCss.type = 'text/css';
-	mobileCss.innerHTML = '\n\t@media screen and (-webkit-min-device-pixel-ratio:0) {\n\t\t.parallax__container {\n\t\t\tclip: auto;\n\t\t\t-webkit-mask-image: -webkit-linear-gradient(top, #fff 0%, #fff 100%);\n\t\t\t-webkit-backface-visibility: hidden;\n\t\t\t-webkit-webkit-perspective: 1000;\n\t\t}\n\t};\n\t';
+// check if safari - extend height
+if (safari && !mobile) {
+	windowHeightExtra = window.outerHeight - window.innerHeight;
+}
 
-	document.getElementsByTagName('head')[0].appendChild(mobileCss);
+if (mobile) {
+	windowHeight = window.screen.availHeight; // stops from jumping
+	windowHeightExtra = (window.screen.availHeight - window.innerHeight) / 2; // prevents white spaces
 }
 
-function calculateHeight(parallax, speed) {
-	for (var i = 0; parallax.length > i; i++) {
-		var container = parallax[i].parentElement.parentElement.getBoundingClientRect().height;
-
-		var elemOffsetTop = (windowHeight - container) / 2;
-		var bgHeight = Math.ceil(container + (elemOffsetTop - elemOffsetTop / speed) * 2) + 4;
-		parallax[i].style.height = bgHeight + 'px';
-	}
+// position parallax
+function positionParallax(container, speed, parallax, elem) {
+	var bgScroll = container.top / speed - windowHeightExtra;
+	parallax[elem].style.top = bgScroll + 'px';
 }
 
+// animate parallax
 function animateParallax(parallax, speed) {
@@ -38,5 +39,3 @@ for (var i = 0; parallax.length > i; i++) {
 		if (container.top + container.height >= 0 && container.top <= windowHeight) {
-			var bgScroll = (container.top - 2) / speed;
-
-			parallax[i].style.top = bgScroll + 'px';
+			positionParallax(container, speed, parallax, i);
 		}
@@ -46,4 +45,18 @@ }
 
+// determine height
+function calculateHeight(parallax, speed) {
+	for (var i = 0; parallax.length > i; i++) {
+		var container = parallax[i].parentElement.parentElement.getBoundingClientRect();
+		var elemOffsetTop = (windowHeight - container.height) / 2;
+		var bgHeight = container.height + (elemOffsetTop - elemOffsetTop / speed) * 2;
+
+		parallax[i].style.height = bgHeight + windowHeightExtra * 2 + 'px';
+		positionParallax(container, speed, parallax, i);
+	}
+}
+
 var universalParallax = function universalParallax() {
 	var up = function up(parallax, speed) {
+
+		// check that speed is not a negative number
 		if (speed < 1) {
@@ -53,28 +66,20 @@ speed = 1;
 
+		// set height on elements
 		calculateHeight(parallax, speed);
 
-		window.addEventListener("resize", function () {
-			calculateHeight(parallax, speed);
-		});
-
-		var latestKnownScrollY = 0,
-		    scrolled = false;
-
-		function onScroll() {
-			latestKnownScrollY = window.scrollY;
-			if (!scrolled) {
-				requestAnimationFrame(runScrollAnimations);
-			}
-			scrolled = true;
+		// recalculate height on resize
+		if (!mobile) {
+			window.addEventListener("resize", function () {
+				windowHeight = window.innerHeight;
+				calculateHeight(parallax, speed);
+			});
 		}
 
-		function runScrollAnimations() {
-			scrolled = false;
-			var currentScrollY = latestKnownScrollY;
+		// Add scroll event listener
+		window.addEventListener("scroll", function () {
 			animateParallax(parallax, speed);
-		}
-
-		window.addEventListener('scroll', onScroll, false);
+		});
 	};
 
+	// Ready all elements
 	this.init = function (param) {
@@ -92,2 +97,3 @@ if (typeof param === 'undefined') {
 		for (var i = 0; parallax.length > i; i++) {
+			// make container div
 			var wrapper = document.createElement('div');
@@ -99,2 +105,3 @@ parallax[i].parentNode.insertBefore(wrapper, parallax[i]);
 
+			// // parent elem need position: relative for effect to work - if not already defined, add it
 			if (window.getComputedStyle(parallaxContainer.parentElement, null).getPropertyValue('position') !== 'relative') {
@@ -105,6 +112,6 @@ parallaxContainer.parentElement.style.position = 'relative';
 			var imgData = parallax[i].dataset.parallaxImage;
-
+			// add image to div if none is specified
 			if (typeof imgData !== 'undefined') {
 				parallax[i].style.backgroundImage = 'url(' + imgData + ')';
-
+				// if no other class than .parallax is specified, add CSS
 				if (parallax[i].classList.length === 1 && parallax[i].classList[0] === 'parallax') {
@@ -120,4 +127,5 @@ Object.assign(parallax[i].style, {
 
+		// when init completed, run function
 		up(parallax, param.speed);
 	};
 };

dist/universal-parallax.min.js

@@ -1,1 +0,1 @@
-"use strict";var windowHeight=window.innerHeight;if(/Mobi/.test(navigator.userAgent)){windowHeight=screen.height;var mobileCss=document.createElement("style");mobileCss.type="text/css",mobileCss.innerHTML="\n\t@media screen and (-webkit-min-device-pixel-ratio:0) {\n\t\t.parallax__container {\n\t\t\tclip: auto;\n\t\t\t-webkit-mask-image: -webkit-linear-gradient(top, #fff 0%, #fff 100%);\n\t\t\t-webkit-backface-visibility: hidden;\n\t\t\t-webkit-webkit-perspective: 1000;\n\t\t}\n\t};\n\t",document.getElementsByTagName("head")[0].appendChild(mobileCss)}function calculateHeight(e,t){for(var a=0;e.length>a;a++){var n=e[a].parentElement.parentElement.getBoundingClientRect().height,i=(windowHeight-n)/2,l=Math.ceil(n+2*(i-i/t))+4;e[a].style.height=l+"px"}}function animateParallax(e,t){for(var a=0;e.length>a;a++){var n=e[a].parentElement.parentElement.getBoundingClientRect();if(n.top+n.height>=0&&n.top<=windowHeight){var i=(n.top-2)/t;e[a].style.top=i+"px"}}}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=document.getElementsByClassName(e.className),a=0;t.length>a;a++){var n=document.createElement("div");t[a].parentNode.insertBefore(n,t[a]),n.appendChild(t[a]);var i=t[a].parentElement;i.className+="parallax__container","relative"!==window.getComputedStyle(i.parentElement,null).getPropertyValue("position")&&(i.parentElement.style.position="relative");var l=t[a].dataset.parallaxImage;void 0!==l&&(t[a].style.backgroundImage="url("+l+")",1===t[a].classList.length&&"parallax"===t[a].classList[0]&&Object.assign(t[a].style,{"background-repeat":"no-repeat","background-position":"center","background-size":"cover"}))}!function(e,t){t<1&&(t=1),calculateHeight(e,t),window.addEventListener("resize",function(){calculateHeight(e,t)});var a=!1;function n(){a=!1,animateParallax(e,t)}window.addEventListener("scroll",function(){window.scrollY,a||requestAnimationFrame(n),a=!0},!1)}(t,e.speed)}};
+"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)})}};

package.json

 {
     "name": "universal-parallax",
-    "version": "1.1.7",
+    "version": "1.2.0",
     "description": "Easy parallax plugin using pure javascript. Cross browser compatibility, including mobile platforms (iOS, Android). Support for opaque backgrounds.",
@@ -5,0 +5,0 @@ "main": "dist/universal-parallax.js",

README.md

@@ -11,4 +11,4 @@ # Universal Parallax
 - Adaptive height
-- Support for mobile devices
-- Support for opacity on BG
+- Works on mobile devices
+- Can have opacity without affecting content
 
@@ -39,8 +39,9 @@ ## :floppy_disk: Install
 .parallax__container {
-	position: absolute;
 	clip: rect(0, auto, auto, 0);
-	width: 100%;
 	height: 100%;
+	left: 0;
+	overflow: hidden;
+	position: absolute;
 	top: 0;
-	left: 0;
+	width: 100%;
 	z-index: -100;
@@ -51,11 +52,10 @@ }
 	position: fixed;
+	top: 0;
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
 	width: 100%;
-	height: 100%;
-	top: 0;
-	left: 0;
-	transform: translate3d(0,0,0);
 
 	/* BG behaviour */
+	background-position: center;
 	background-repeat: no-repeat;
-	background-position: center;
 	background-size: cover;
@@ -62,0 +62,0 @@ }

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

1809653

increased by0.05%

Lines of code

235

increased by5.38%

No dependency changes