rellax - npm Package Compare versions

Comparing version 1.10.0 to 1.11.0

package.json

 {
   "name": "rellax",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "Lightweight, vanilla javascript parallax library",
@@ -5,0 +5,0 @@ "main": "rellax.js",

rellax.js

@@ -82,2 +82,4 @@
       speed: -2,
+	  verticalSpeed: null,
+	  horizontalSpeed: null,
       center: false,
@@ -89,2 +91,4 @@ wrapper: null,
       horizontal: false,
+      verticalScrollAxis: "y",
+      horizontalScrollAxis: "x",
       callback: function() {},
@@ -175,5 +179,13 @@ };
       var dataSpeed = el.getAttribute( 'data-rellax-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 dataMinX = el.getAttribute('data-rellax-min-x');
+      var dataMaxX = el.getAttribute('data-rellax-max-x');
+      var dataMinY = el.getAttribute('data-rellax-min-y');
+      var dataMaxY = el.getAttribute('data-rellax-max-y');
 
@@ -207,5 +219,11 @@ // initializing at scrollY = 0 (top of browser), scrollX = 0 (left of browser)
       var speed = dataSpeed ? dataSpeed : self.options.speed;
+      var verticalSpeed = dataVerticalSpeed ? dataVerticalSpeed : self.options.verticalSpeed;
+      var horizontalSpeed = dataHorizontalSpeed ? dataHorizontalSpeed : self.options.horizontalSpeed;
 
-      var bases = updatePosition(percentageX, percentageY, speed);
+      // Optional individual block movement axis direction as data attr, otherwise gobal movement direction
+      var verticalScrollAxis = dataVericalScrollAxis ? dataVericalScrollAxis : self.options.verticalScrollAxis;
+      var horizontalScrollAxis = dataHorizontalScrollAxis ? dataHorizontalScrollAxis : self.options.horizontalScrollAxis;	  
 
+      var bases = updatePosition(percentageX, percentageY, speed, verticalSpeed, horizontalSpeed);
+
       // ~~Store non-translate3d transforms~~
@@ -242,2 +260,6 @@ // Store inline styles and extract transforms
         speed: speed,
+        verticalSpeed: verticalSpeed,
+        horizontalSpeed: horizontalSpeed,
+        verticalScrollAxis: verticalScrollAxis,
+        horizontalScrollAxis: horizontalScrollAxis,
         style: style,
@@ -247,3 +269,7 @@ transform: transform,
         min: dataMin,
-        max: dataMax
+        max: dataMax,
+        minX: dataMinX,
+        maxX: dataMaxX,
+        minY: dataMinY,
+        maxY: dataMaxY
       };
@@ -285,6 +311,6 @@ };
     // Allow for decimal pixel values
-    var updatePosition = function(percentageX, percentageY, speed) {
+    var updatePosition = function(percentageX, percentageY, speed, verticalSpeed, horizontalSpeed) {
       var result = {};
-      var valueX = (speed * (100 * (1 - percentageX)));
-      var valueY = (speed * (100 * (1 - percentageY)));
+      var valueX = ((horizontalSpeed ? horizontalSpeed : speed) * (100 * (1 - percentageX)));
+      var valueY = ((verticalSpeed ? verticalSpeed : speed) * (100 * (1 - percentageY)));
 
@@ -330,7 +356,15 @@ result.x = self.options.round ? Math.round(valueX) : Math.round(valueX * 100) / 100;
       for (var i = 0; i < self.elems.length; i++){
-        var percentageY = ((posY - blocks[i].top + screenY) / (blocks[i].height + screenY));
-        var percentageX = ((posX - blocks[i].left + screenX) / (blocks[i].width + screenX));
+        // 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].baseX;
+        positions = updatePosition(percentageX, percentageY, blocks[i].speed, blocks[i].verticalSpeed, blocks[i].horizontalSpeed);
         var positionY = positions.y - blocks[i].baseY;
@@ -356,2 +390,10 @@ var positionX = positions.x - blocks[i].baseX;
 
+        // 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) {
+            positionX = positionX <= blocks[i].minX ? blocks[i].minX : positionX;
+        }
+
         // Check if a max limit is defined
@@ -367,2 +409,10 @@ if (blocks[i].max !== 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) {
+            positionX = positionX >= blocks[i].maxX ? blocks[i].maxX : positionX;
+        }
+
         var zindex = blocks[i].zindex;
@@ -369,0 +419,0 @@

rellax.min.js

@@ -1,9 +0,13 @@
-(function(n,h){"function"===typeof define&&define.amd?define([],h):"object"===typeof module&&module.exports?module.exports=h():n.Rellax=h()})("undefined"!==typeof window?window:global,function(){var n=function(h,p){var a=Object.create(n.prototype),l=0,r=0,k=0,t=0,c=[],u=!0,B=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(a){return setTimeout(a,1E3/60)},q=null,C=window.cancelAnimationFrame||
-window.mozCancelAnimationFrame||clearTimeout,D=window.transformProp||function(){var a=document.createElement("div");if(null===a.style.transform){var b=["Webkit","Moz","ms"],e;for(e in b)if(void 0!==a.style[b[e]+"Transform"])return b[e]+"Transform"}return"transform"}();a.options={speed:-2,center:!1,wrapper:null,relativeToWrapper:!1,round:!0,vertical:!0,horizontal:!1,callback:function(){}};p&&Object.keys(p).forEach(function(d){a.options[d]=p[d]});h||(h=".rellax");var m="string"===typeof h?document.querySelectorAll(h):
-[h];if(0<m.length){a.elems=m;if(a.options.wrapper&&!a.options.wrapper.nodeType)if(m=document.querySelector(a.options.wrapper))a.options.wrapper=m;else{console.warn("Rellax: The wrapper you're trying to use doesn't exist.");return}var w=function(){for(var d=0;d<c.length;d++)a.elems[d].style.cssText=c[d].style;c=[];r=window.innerHeight;t=window.innerWidth;x();for(d=0;d<a.elems.length;d++){var b=a.elems[d],e=b.getAttribute("data-rellax-percentage"),g=b.getAttribute("data-rellax-speed"),h=b.getAttribute("data-rellax-zindex")||
-0,l=b.getAttribute("data-rellax-min"),n=b.getAttribute("data-rellax-max"),v=a.options.wrapper?a.options.wrapper.scrollTop:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;a.options.relativeToWrapper&&(v=(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop)-a.options.wrapper.offsetTop);var f=a.options.vertical?e||a.options.center?v:0:0,k=a.options.horizontal?e||a.options.center?a.options.wrapper?a.options.wrapper.scrollLeft:window.pageXOffset||
-document.documentElement.scrollLeft||document.body.scrollLeft:0:0;v=f+b.getBoundingClientRect().top;var m=b.clientHeight||b.offsetHeight||b.scrollHeight,p=k+b.getBoundingClientRect().left,q=b.clientWidth||b.offsetWidth||b.scrollWidth;f=e?e:(f-v+r)/(m+r);e=e?e:(k-p+t)/(q+t);a.options.center&&(f=e=.5);g=g?g:a.options.speed;e=y(e,f,g);b=b.style.cssText;f="";0<=b.indexOf("transform")&&(f=b.indexOf("transform"),f=b.slice(f),f=(k=f.indexOf(";"))?" "+f.slice(11,k).replace(/\s/g,""):" "+f.slice(11).replace(/\s/g,
-""));c.push({baseX:e.x,baseY:e.y,top:v,left:p,height:m,width:q,speed:g,style:b,transform:f,zindex:h,min:l,max:n})}u&&(window.addEventListener("resize",w),u=!1);z()},x=function(){var d=l,b=k;l=a.options.wrapper?a.options.wrapper.scrollTop:(document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset;k=a.options.wrapper?a.options.wrapper.scrollLeft:(document.documentElement||document.body.parentNode||document.body).scrollLeft||window.pageXOffset;a.options.relativeToWrapper&&
-(l=((document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset)-a.options.wrapper.offsetTop);return d!=l&&a.options.vertical||b!=k&&a.options.horizontal?!0:!1},y=function(d,b,e){var c={};d=100*e*(1-d);b=100*e*(1-b);c.x=a.options.round?Math.round(d):Math.round(100*d)/100;c.y=a.options.round?Math.round(b):Math.round(100*b)/100;return c},A=function(){x()&&!1===u&&z();q=B(A)},z=function(){for(var d,b=0;b<a.elems.length;b++){d=y((k-c[b].left+t)/(c[b].width+t),(l-
-c[b].top+r)/(c[b].height+r),c[b].speed);var e=d.y-c[b].baseY,g=d.x-c[b].baseX;null!==c[b].min&&(a.options.vertical&&!a.options.horizontal&&(e=e<=c[b].min?c[b].min:e),a.options.horizontal&&!a.options.vertical&&(g=g<=c[b].min?c[b].min:g));null!==c[b].max&&(a.options.vertical&&!a.options.horizontal&&(e=e>=c[b].max?c[b].max:e),a.options.horizontal&&!a.options.vertical&&(g=g>=c[b].max?c[b].max:g));a.elems[b].style[D]="translate3d("+(a.options.horizontal?g:"0")+"px,"+(a.options.vertical?e:"0")+"px,"+c[b].zindex+
-"px) "+c[b].transform}a.options.callback(d)};a.destroy=function(){for(var d=0;d<a.elems.length;d++)a.elems[d].style.cssText=c[d].style;u||(window.removeEventListener("resize",w),u=!0);C(q);q=null};w();A();a.refresh=w;return a}console.warn("Rellax: The elements you're trying to select don't exist.")};return n});
+(function(q,g){"function"===typeof define&&define.amd?define([],g):"object"===typeof module&&module.exports?module.exports=g():q.Rellax=g()})("undefined"!==typeof window?window:global,function(){var q=function(g,t){var b=Object.create(q.prototype),l=0,u=0,n=0,v=0,c=[],w=!0,A=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(b){return setTimeout(b,1E3/60)},p=null,x=!1;try{var k=
+Object.defineProperty({},"passive",{get:function(){x=!0}});window.addEventListener("testPassive",null,k);window.removeEventListener("testPassive",null,k)}catch(f){}var J=window.cancelAnimationFrame||window.mozCancelAnimationFrame||clearTimeout,K=window.transformProp||function(){var b=document.createElement("div");if(null===b.style.transform){var a=["Webkit","Moz","ms"],d;for(d in a)if(void 0!==b.style[a[d]+"Transform"])return a[d]+"Transform"}return"transform"}();b.options={speed:-2,verticalSpeed:null,
+horizontalSpeed:null,center:!1,wrapper:null,relativeToWrapper:!1,round:!0,vertical:!0,horizontal:!1,verticalScrollAxis:"y",horizontalScrollAxis:"x",callback:function(){}};t&&Object.keys(t).forEach(function(c){b.options[c]=t[c]});g||(g=".rellax");k="string"===typeof g?document.querySelectorAll(g):[g];if(0<k.length){b.elems=k;if(b.options.wrapper&&!b.options.wrapper.nodeType)if(k=document.querySelector(b.options.wrapper))b.options.wrapper=k;else{console.warn("Rellax: The wrapper you're trying to use doesn't exist.");
+return}var B=function(){for(var f=0;f<c.length;f++)b.elems[f].style.cssText=c[f].style;c=[];u=window.innerHeight;v=window.innerWidth;D();for(f=0;f<b.elems.length;f++){var a=b.elems[f],d=a.getAttribute("data-rellax-percentage"),e=a.getAttribute("data-rellax-speed"),y=a.getAttribute("data-rellax-vertical-speed"),g=a.getAttribute("data-rellax-horizontal-speed"),h=a.getAttribute("data-rellax-vertical-scroll-axis"),k=a.getAttribute("data-rellax-horizontal-scroll-axis"),l=a.getAttribute("data-rellax-zindex")||
+0,n=a.getAttribute("data-rellax-min"),p=a.getAttribute("data-rellax-max"),q=a.getAttribute("data-rellax-min-x"),t=a.getAttribute("data-rellax-max-x"),x=a.getAttribute("data-rellax-min-y"),A=a.getAttribute("data-rellax-max-y"),z=b.options.wrapper?b.options.wrapper.scrollTop:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;b.options.relativeToWrapper&&(z=(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop)-b.options.wrapper.offsetTop);var m=
+b.options.vertical?d||b.options.center?z:0:0,r=b.options.horizontal?d||b.options.center?b.options.wrapper?b.options.wrapper.scrollLeft:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft:0:0;z=m+a.getBoundingClientRect().top;var E=a.clientHeight||a.offsetHeight||a.scrollHeight,F=r+a.getBoundingClientRect().left,G=a.clientWidth||a.offsetWidth||a.scrollWidth;m=d?d:(m-z+u)/(E+u);d=d?d:(r-F+v)/(G+v);b.options.center&&(m=d=.5);e=e?e:b.options.speed;y=y?y:b.options.verticalSpeed;
+g=g?g:b.options.horizontalSpeed;h=h?h:b.options.verticalScrollAxis;k=k?k:b.options.horizontalScrollAxis;m=H(d,m,e,y,g);a=a.style.cssText;d="";if(r=/transform\s*:/i.exec(a))d=a.slice(r.index),d=(r=d.indexOf(";"))?" "+d.slice(11,r).replace(/\s/g,""):" "+d.slice(11).replace(/\s/g,"");c.push({baseX:m.x,baseY:m.y,top:z,left:F,height:E,width:G,speed:e,verticalSpeed:y,horizontalSpeed:g,verticalScrollAxis:h,horizontalScrollAxis:k,style:a,transform:d,zindex:l,min:n,max:p,minX:q,maxX:t,minY:x,maxY:A})}I();
+w&&(window.addEventListener("resize",B),w=!1,C())},D=function(){var c=l,a=n;l=b.options.wrapper?b.options.wrapper.scrollTop:(document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset;n=b.options.wrapper?b.options.wrapper.scrollLeft:(document.documentElement||document.body.parentNode||document.body).scrollLeft||window.pageXOffset;b.options.relativeToWrapper&&(l=((document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset)-
+b.options.wrapper.offsetTop);return c!=l&&b.options.vertical||a!=n&&b.options.horizontal?!0:!1},H=function(c,a,d,e,g){var f={};c=100*(g?g:d)*(1-c);a=100*(e?e:d)*(1-a);f.x=b.options.round?Math.round(c):Math.round(100*c)/100;f.y=b.options.round?Math.round(a):Math.round(100*a)/100;return f},h=function(){window.removeEventListener("resize",h);window.removeEventListener("orientationchange",h);(b.options.wrapper?b.options.wrapper:window).removeEventListener("scroll",h);(b.options.wrapper?b.options.wrapper:
+document).removeEventListener("touchmove",h);p=A(C)},C=function(){D()&&!1===w?(I(),p=A(C)):(p=null,window.addEventListener("resize",h),window.addEventListener("orientationchange",h),(b.options.wrapper?b.options.wrapper:window).addEventListener("scroll",h,x?{passive:!0}:!1),(b.options.wrapper?b.options.wrapper:document).addEventListener("touchmove",h,x?{passive:!0}:!1))},I=function(){for(var f,a=0;a<b.elems.length;a++){var d=c[a].verticalScrollAxis.toLowerCase(),e=c[a].horizontalScrollAxis.toLowerCase();
+f=-1!=d.indexOf("x")?l:0;d=-1!=d.indexOf("y")?l:0;var g=-1!=e.indexOf("x")?n:0;e=-1!=e.indexOf("y")?n:0;f=H((f+g-c[a].left+v)/(c[a].width+v),(d+e-c[a].top+u)/(c[a].height+u),c[a].speed,c[a].verticalSpeed,c[a].horizontalSpeed);e=f.y-c[a].baseY;d=f.x-c[a].baseX;null!==c[a].min&&(b.options.vertical&&!b.options.horizontal&&(e=e<=c[a].min?c[a].min:e),b.options.horizontal&&!b.options.vertical&&(d=d<=c[a].min?c[a].min:d));null!=c[a].minY&&(e=e<=c[a].minY?c[a].minY:e);null!=c[a].minX&&(d=d<=c[a].minX?c[a].minX:
+d);null!==c[a].max&&(b.options.vertical&&!b.options.horizontal&&(e=e>=c[a].max?c[a].max:e),b.options.horizontal&&!b.options.vertical&&(d=d>=c[a].max?c[a].max:d));null!=c[a].maxY&&(e=e>=c[a].maxY?c[a].maxY:e);null!=c[a].maxX&&(d=d>=c[a].maxX?c[a].maxX:d);b.elems[a].style[K]="translate3d("+(b.options.horizontal?d:"0")+"px,"+(b.options.vertical?e:"0")+"px,"+c[a].zindex+"px) "+c[a].transform}b.options.callback(f)};b.destroy=function(){for(var f=0;f<b.elems.length;f++)b.elems[f].style.cssText=c[f].style;
+w||(window.removeEventListener("resize",B),w=!0);J(p);p=null};B();b.refresh=B;return b}console.warn("Rellax: The elements you're trying to select don't exist.")};return q});

No alert changes

Improved metrics

Total package byte prevSize

199067

increased by4.29%

Number of package files

18

increased by5.88%

Lines of code

775

increased by6.9%

No dependency changes