rellax - npm Package Compare versions

Comparing version 1.11.0 to 1.12.0

package.json

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

README.md

@@ -52,2 +52,20 @@ # RELLAX
 
+#### Responsive Speed
+Use responsive speed attributes for breakpoint levels that require a different speed. Defaults to the `data-rellax-speed` setting in unspecified breakpoints.
+```html
+<div class="rellax" data-rellax-speed="7" data-rellax-xs-speed="-5" data-rellax-mobile-speed="3" data-rellax-tablet-speed="-8" data-rellax-desktop-speed="1">
+  I parallax at all different speeds depending on your screen width.
+</div>
+```
+
+Pass an array of breakpoints (mobile, tablet and desktop respectively).
+```html
+<script>
+  // This is the default setting
+  var rellax = new Rellax('.rellax', {
+    breakpoints: [576, 768, 1201]
+  });
+</script>
+```
+
 ### Centering
@@ -94,3 +112,3 @@ After some fantastic work from [@p-realinho](https://github.com/p-realinho), we just released the ability to center parallax elements in your viewport! We'll be building a nice demo website, but for now check out the tests folder for several examples of how it works.
 ### Custom Wrapper
-By default, the position of parallax elements is determined via the scroll position of the body. Passing in the `wrapper` property will tell Rellax to watch that element instead. 
+By default, the position of parallax elements is determined via the scroll position of the body. Passing in the `wrapper` property will tell Rellax to watch that element instead.
 ```html
@@ -97,0 +115,0 @@ <script>

rellax.js

@@ -82,4 +82,5 @@
       speed: -2,
-	  verticalSpeed: null,
-	  horizontalSpeed: null,
+	    verticalSpeed: null,
+	    horizontalSpeed: null,
+      breakpoints: [576, 768, 1201],
       center: false,
@@ -103,2 +104,25 @@ wrapper: null,
 
+    function validateCustomBreakpoints () {
+      if (self.options.breakpoints.length === 3 && Array.isArray(self.options.breakpoints)) {
+        var isAscending = true;
+        var isNumerical = true;
+        var lastVal;
+        self.options.breakpoints.forEach(function (i) {
+          if (typeof i !== 'number') isNumerical = false;
+          if (lastVal !== null) {
+            if (i < lastVal) isAscending = false;
+          }
+          lastVal = i;
+        });
+        if (isAscending && isNumerical) return;
+      }
+      // revert defaults if set incorrectly
+      self.options.breakpoints = [576, 768, 1201];
+      console.warn("Rellax: You must pass an array of 3 numbers in ascending order to the breakpoints option. Defaults reverted");
+    }
+
+    if (options.breakpoints) {
+      validateCustomBreakpoints();
+    }
+
     // By default, rellax class
@@ -137,3 +161,14 @@ if (!el) {
 
+    // set a placeholder for the current breakpoint
+    var currentBreakpoint;
 
+    // helper to determine current breakpoint
+    var getCurrentBreakpoint = function (w) {
+      var bp = self.options.breakpoints;
+      if (w < bp[0]) return 'xs';
+      if (w >= bp[0] && w < bp[1]) return 'sm';
+      if (w >= bp[1] && w < bp[2]) return 'md';
+      return 'lg';
+    };
+
     // Get and cache initial position of all elements
@@ -159,2 +194,4 @@ var cacheBlocks = function() {
       screenX = window.innerWidth;
+      currentBreakpoint = getCurrentBreakpoint(screenX);
+
       setPosition();
@@ -181,2 +218,6 @@
       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');
@@ -193,3 +234,16 @@ var dataHorizontalSpeed = el.getAttribute('data-rellax-horizontal-speed');
       var dataMaxY = el.getAttribute('data-rellax-max-y');
+      var mapBreakpoints;
+      var breakpoints = true;
 
+      if (!dataXsSpeed && !dataMobileSpeed && !dataTabletSpeed && !dataDesktopSpeed) {
+        breakpoints = false;
+      } else {
+        mapBreakpoints = {
+          'xs': dataXsSpeed,
+          'sm': dataMobileSpeed,
+          'md': dataTabletSpeed,
+          'lg': dataDesktopSpeed
+        };
+      }
+
       // initializing at scrollY = 0 (top of browser), scrollX = 0 (left of browser)
@@ -221,3 +275,3 @@ // ensures elements are positioned based on HTML layout.
       // Optional individual block speed as data attr, otherwise global speed
-      var speed = dataSpeed ? dataSpeed : self.options.speed;
+      var speed = (breakpoints && mapBreakpoints[currentBreakpoint] !== null) ? Number(mapBreakpoints[currentBreakpoint]) : (dataSpeed ? dataSpeed : self.options.speed);
       var verticalSpeed = dataVerticalSpeed ? dataVerticalSpeed : self.options.verticalSpeed;
@@ -228,3 +282,3 @@ var horizontalSpeed = dataHorizontalSpeed ? dataHorizontalSpeed : self.options.horizontalSpeed;
       var verticalScrollAxis = dataVericalScrollAxis ? dataVericalScrollAxis : self.options.verticalScrollAxis;
-      var horizontalScrollAxis = dataHorizontalScrollAxis ? dataHorizontalScrollAxis : self.options.horizontalScrollAxis;	  
+      var horizontalScrollAxis = dataHorizontalScrollAxis ? dataHorizontalScrollAxis : self.options.horizontalScrollAxis;
 
@@ -231,0 +285,0 @@ var bases = updatePosition(percentageX, percentageY, speed, verticalSpeed, horizontalSpeed);

rellax.min.js

@@ -1,13 +0,14 @@
-(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});
+(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,u){function C(){if(3===a.options.breakpoints.length&&Array.isArray(a.options.breakpoints)){var f=!0,c=!0,b;a.options.breakpoints.forEach(function(a){"number"!==typeof a&&(c=!1);null!==b&&a<b&&(f=!1);b=a});if(f&&c)return}a.options.breakpoints=[576,768,1201];console.warn("Rellax: You must pass an array of 3 numbers in ascending order to the breakpoints option. Defaults reverted")}
+var a=Object.create(q.prototype),l=0,v=0,m=0,n=0,d=[],w=!0,A=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(a){return setTimeout(a,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 D=window.cancelAnimationFrame||window.mozCancelAnimationFrame||
+clearTimeout,E=window.transformProp||function(){var a=document.createElement("div");if(null===a.style.transform){var c=["Webkit","Moz","ms"],b;for(b in c)if(void 0!==a.style[c[b]+"Transform"])return c[b]+"Transform"}return"transform"}();a.options={speed:-2,verticalSpeed:null,horizontalSpeed:null,breakpoints:[576,768,1201],center:!1,wrapper:null,relativeToWrapper:!1,round:!0,vertical:!0,horizontal:!1,verticalScrollAxis:"y",horizontalScrollAxis:"x",callback:function(){}};u&&Object.keys(u).forEach(function(d){a.options[d]=
+u[d]});u.breakpoints&&C();g||(g=".rellax");k="string"===typeof g?document.querySelectorAll(g):[g];if(0<k.length){a.elems=k;if(a.options.wrapper&&!a.options.wrapper.nodeType)if(k=document.querySelector(a.options.wrapper))a.options.wrapper=k;else{console.warn("Rellax: The wrapper you're trying to use doesn't exist.");return}var F,B=function(){for(var f=0;f<d.length;f++)a.elems[f].style.cssText=d[f].style;d=[];v=window.innerHeight;n=window.innerWidth;f=a.options.breakpoints;F=n<f[0]?"xs":n>=f[0]&&n<
+f[1]?"sm":n>=f[1]&&n<f[2]?"md":"lg";H();for(f=0;f<a.elems.length;f++){var c=void 0,b=a.elems[f],e=b.getAttribute("data-rellax-percentage"),y=b.getAttribute("data-rellax-speed"),t=b.getAttribute("data-rellax-xs-speed"),g=b.getAttribute("data-rellax-mobile-speed"),h=b.getAttribute("data-rellax-tablet-speed"),k=b.getAttribute("data-rellax-desktop-speed"),l=b.getAttribute("data-rellax-vertical-speed"),m=b.getAttribute("data-rellax-horizontal-speed"),p=b.getAttribute("data-rellax-vertical-scroll-axis"),
+q=b.getAttribute("data-rellax-horizontal-scroll-axis"),u=b.getAttribute("data-rellax-zindex")||0,x=b.getAttribute("data-rellax-min"),A=b.getAttribute("data-rellax-max"),C=b.getAttribute("data-rellax-min-x"),D=b.getAttribute("data-rellax-max-x"),E=b.getAttribute("data-rellax-min-y"),L=b.getAttribute("data-rellax-max-y"),r=!0;t||g||h||k?c={xs:t,sm:g,md:h,lg:k}:r=!1;t=a.options.wrapper?a.options.wrapper.scrollTop:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;a.options.relativeToWrapper&&
+(t=(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop)-a.options.wrapper.offsetTop);var z=a.options.vertical?e||a.options.center?t:0:0,I=a.options.horizontal?e||a.options.center?a.options.wrapper?a.options.wrapper.scrollLeft:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft:0:0;t=z+b.getBoundingClientRect().top;g=b.clientHeight||b.offsetHeight||b.scrollHeight;h=I+b.getBoundingClientRect().left;k=b.clientWidth||b.offsetWidth||b.scrollWidth;
+z=e?e:(z-t+v)/(g+v);e=e?e:(I-h+n)/(k+n);a.options.center&&(z=e=.5);c=r&&null!==c[F]?Number(c[F]):y?y:a.options.speed;l=l?l:a.options.verticalSpeed;m=m?m:a.options.horizontalSpeed;p=p?p:a.options.verticalScrollAxis;q=q?q:a.options.horizontalScrollAxis;y=J(e,z,c,l,m);b=b.style.cssText;r="";if(e=/transform\s*:/i.exec(b))r=b.slice(e.index),r=(e=r.indexOf(";"))?" "+r.slice(11,e).replace(/\s/g,""):" "+r.slice(11).replace(/\s/g,"");d.push({baseX:y.x,baseY:y.y,top:t,left:h,height:g,width:k,speed:c,verticalSpeed:l,
+horizontalSpeed:m,verticalScrollAxis:p,horizontalScrollAxis:q,style:b,transform:r,zindex:u,min:x,max:A,minX:C,maxX:D,minY:E,maxY:L})}K();w&&(window.addEventListener("resize",B),w=!1,G())},H=function(){var d=l,c=m;l=a.options.wrapper?a.options.wrapper.scrollTop:(document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset;m=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||c!=m&&a.options.horizontal?!0:!1},J=function(d,c,b,e,g){var f={};d=100*(g?g:b)*(1-d);c=100*(e?e:b)*(1-c);f.x=a.options.round?Math.round(d):Math.round(100*d)/100;f.y=a.options.round?Math.round(c):Math.round(100*c)/100;return f},h=function(){window.removeEventListener("resize",h);window.removeEventListener("orientationchange",
+h);(a.options.wrapper?a.options.wrapper:window).removeEventListener("scroll",h);(a.options.wrapper?a.options.wrapper:document).removeEventListener("touchmove",h);p=A(G)},G=function(){H()&&!1===w?(K(),p=A(G)):(p=null,window.addEventListener("resize",h),window.addEventListener("orientationchange",h),(a.options.wrapper?a.options.wrapper:window).addEventListener("scroll",h,x?{passive:!0}:!1),(a.options.wrapper?a.options.wrapper:document).addEventListener("touchmove",h,x?{passive:!0}:!1))},K=function(){for(var f,
+c=0;c<a.elems.length;c++){var b=d[c].verticalScrollAxis.toLowerCase(),e=d[c].horizontalScrollAxis.toLowerCase();f=-1!=b.indexOf("x")?l:0;b=-1!=b.indexOf("y")?l:0;var g=-1!=e.indexOf("x")?m:0;e=-1!=e.indexOf("y")?m:0;f=J((f+g-d[c].left+n)/(d[c].width+n),(b+e-d[c].top+v)/(d[c].height+v),d[c].speed,d[c].verticalSpeed,d[c].horizontalSpeed);e=f.y-d[c].baseY;b=f.x-d[c].baseX;null!==d[c].min&&(a.options.vertical&&!a.options.horizontal&&(e=e<=d[c].min?d[c].min:e),a.options.horizontal&&!a.options.vertical&&
+(b=b<=d[c].min?d[c].min:b));null!=d[c].minY&&(e=e<=d[c].minY?d[c].minY:e);null!=d[c].minX&&(b=b<=d[c].minX?d[c].minX:b);null!==d[c].max&&(a.options.vertical&&!a.options.horizontal&&(e=e>=d[c].max?d[c].max:e),a.options.horizontal&&!a.options.vertical&&(b=b>=d[c].max?d[c].max:b));null!=d[c].maxY&&(e=e>=d[c].maxY?d[c].maxY:e);null!=d[c].maxX&&(b=b>=d[c].maxX?d[c].maxX:b);a.elems[c].style[E]="translate3d("+(a.options.horizontal?b:"0")+"px,"+(a.options.vertical?e:"0")+"px,"+d[c].zindex+"px) "+d[c].transform}a.options.callback(f)};
+a.destroy=function(){for(var f=0;f<a.elems.length;f++)a.elems[f].style.cssText=d[f].style;w||(window.removeEventListener("resize",B),w=!0);D(p);p=null};B();a.refresh=B;return a}console.warn("Rellax: The elements you're trying to select don't exist.")};return q});

No alert changes

Improved metrics

Total package byte prevSize

204986

increased by2.97%

Number of package files

19

increased by5.56%

Lines of code

833

increased by7.48%

Number of lines in readme file

196

increased by10.11%

No dependency changes