scroll-parallax - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

CHANGELOG.md

 ## Changelog
 
+### 2.0.0
+  * updated: updated riot-observable using the latest version
+  * updated: use `transform: matrix()` for better performances
+  * fixed: [#5](https://github.com/GianlucaGuarini/parallax/issues/5)
+
 ### 1.1.0
@@ -4,0 +9,0 @@ * fixed: https://github.com/GianlucaGuarini/parallax/issues/4 adding the `safeHeight` option

dist/Parallax.js

@@ -47,3 +47,3 @@ (function (global, factory) {
   function extend(src) {
-    var obj,
+    var obj = void 0,
         args = arguments;
@@ -77,14 +77,13 @@ for (var i = 1; i < args.length; ++i) {
 
-  function prefix(obj, prop, value) {
-    var prefixes = ['ms', 'o', 'Moz', 'webkit', ''],
-        i = prefixes.length;
+  function prefix(obj, prop) {
+    var prefixes = ['ms', 'o', 'Moz', 'webkit'];
+    var i = prefixes.length;
     while (i--) {
-      var prefix = prefixes[i],
-          p = prefix ? prefix + prop[0].toUpperCase() + prop.substr(1) : prop.toLowerCase() + prop.substr(1);
+      var _prefix = prefixes[i],
+          p = _prefix ? _prefix + prop[0].toUpperCase() + prop.substr(1) : prop.toLowerCase() + prop.substr(1);
       if (p in obj) {
-        obj[p] = value;
-        return true;
+        return p;
       }
     }
-    return false;
+    return '';
   }
@@ -99,26 +98,6 @@
 
-    function onEachEvent(e, fn) {
-      var es = e.split(' '),
-          l = es.length,
-          i = 0,
-          name,
-          indx;
-      for (; i < l; i++) {
-        name = es[i];
-        indx = name.indexOf('.');
-        if (name) fn(~indx ? name.substring(0, indx) : name, i, ~indx ? name.slice(indx + 1) : null);
-      }
-    }
-
     Object.defineProperties(el, {
       on: {
-        value: function value(events, fn) {
-          if (typeof fn != 'function') return el;
-
-          onEachEvent(events, function (name, pos, ns) {
-            (callbacks[name] = callbacks[name] || []).push(fn);
-            fn.typed = pos > 0;
-            fn.ns = ns;
-          });
-
+        value: function value(event, fn) {
+          if (typeof fn == 'function') (callbacks[event] = callbacks[event] || []).push(fn);
           return el;
@@ -132,12 +111,10 @@ },
       off: {
-        value: function value(events, fn) {
-          if (events == '*' && !fn) callbacks = {};else {
-            onEachEvent(events, function (name, pos, ns) {
-              if (fn || ns) {
-                var arr = callbacks[name];
-                for (var i = 0, cb; cb = arr && arr[i]; ++i) {
-                  if (cb == fn || ns && cb.ns == ns) arr.splice(i--, 1);
-                }
-              } else delete callbacks[name];
-            });
+        value: function value(event, fn) {
+          if (event == '*' && !fn) callbacks = {};else {
+            if (fn) {
+              var arr = callbacks[event];
+              for (var i = 0, cb; cb = arr && arr[i]; ++i) {
+                if (cb == fn) arr.splice(i--, 1);
+              }
+            } else delete callbacks[event];
           }
@@ -152,8 +129,8 @@ return el;
       one: {
-        value: function value(events, fn) {
+        value: function value(event, fn) {
           function on() {
-            el.off(events, on);
+            el.off(event, on);
             fn.apply(el, arguments);
           }
-          return el.on(events, on);
+          return el.on(event, on);
         },
@@ -166,28 +143,21 @@ enumerable: false,
       trigger: {
-        value: function value(events) {
+        value: function value(event) {
           var arglen = arguments.length - 1,
               args = new Array(arglen),
-              fns;
+              fns,
+              fn,
+              i;
 
-          for (var i = 0; i < arglen; i++) {
+          for (i = 0; i < arglen; i++) {
             args[i] = arguments[i + 1];
           }
 
-          onEachEvent(events, function (name, pos, ns) {
+          fns = slice.call(callbacks[event] || [], 0);
 
-            fns = slice.call(callbacks[name] || [], 0);
+          for (i = 0; fn = fns[i]; ++i) {
+            fn.apply(el, args);
+          }
 
-            for (var i = 0, fn; fn = fns[i]; ++i) {
-              if (fn.busy) continue;
-              fn.busy = 1;
-              if (!ns || fn.ns == ns) fn.apply(el, fn.typed ? [name].concat(args) : args);
-              if (fns[i] !== fn) {
-                i--;
-              }
-              fn.busy = 0;
-            }
+          if (callbacks['*'] && event != '*') el.trigger.apply(el, ['*', event].concat(args));
 
-            if (callbacks['*'] && name != '*') el.trigger.apply(el, ['*', name].concat(args));
-          });
-
           return el;
@@ -304,5 +274,8 @@ },
 
-  var HAS_TRANSLATE_3D = function (div) {
-    prefix(div.style, 'transform', 'translate3d(0, 0, 0)');
-    return (/translate3d/g.test(div.style.cssText)
+  var TRANSFORM_PREFIX = function (div) {
+    return prefix(div.style, 'transform');
+  }(document.createElement('div'));
+  var HAS_MATRIX = function (div) {
+    div.style[TRANSFORM_PREFIX] = 'matrix(1, 0, 0, 1, 0, 0)';
+    return (/matrix/g.test(div.style.cssText)
     );
@@ -344,12 +317,12 @@ }(document.createElement('div'));
       value: function update() {
-
         var iw = this.img.naturalWidth || this.img.width,
             ih = this.img.naturalHeight || this.img.height,
             ratio = iw / ih,
-            size = this.size,
-            nh,
-            nw,
-            offsetTop,
-            offsetLeft;
+            size = this.size;
 
+        var nh = void 0,
+            nw = void 0,
+            offsetTop = void 0,
+            offsetLeft = void 0;
+
         if (size.width / ratio <= size.height) {
@@ -368,4 +341,4 @@ nw = size.height * ratio;
 
-        offsetTop = - ~ ~((nh - size.height) / 2);
-        offsetLeft = - ~ ~((nw - size.width) / 2);
+        offsetTop = -~~((nh - size.height) / 2);
+        offsetLeft = -~~((nw - size.width) / 2);
 
@@ -381,10 +354,13 @@ this.img.width = nw;
       key: 'draw',
-      value: function draw(stage) {
+      value: function draw(_ref) {
+        var scrollTop = _ref.scrollTop,
+            width = _ref.width,
+            height = _ref.height;
+
         var size = this.size,
-            perc = (this.offset.top + size.height * this.opts.center + stage.height / 2 - stage.scrollTop) / stage.height - 1;
+            perc = (this.offset.top + size.height * this.opts.center + height / 2 - scrollTop) / height - 1,
+            offset = ~~(perc * (this.img.height / size.height / 2 * this.opts.intensity) * 10);
 
-        perc *= this.img.height / size.height / 2 * this.opts.intensity;
+        this.img.style[TRANSFORM_PREFIX] = HAS_MATRIX ? 'matrix(1,0,0,1, 0, ' + -offset + ')' : 'translate(0, ' + -offset + 'px)';
 
-        if (HAS_TRANSLATE_3D) prefix(this.img.style, 'transform', 'translate3d(0, ' + -perc + '%, 0)');else prefix(this.img.style, 'transform', 'translate(0, ' + -perc + '%)');
-
         return this;
@@ -419,7 +395,7 @@ }
 
-  var stage;
+  var stage = void 0;
 
   var Parallax = function () {
     function Parallax(selector) {
-      var opts = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+      var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
@@ -503,15 +479,17 @@ _classCallCheck(this, Parallax);
       value: function scroll(scrollTop) {
-        var i = this.canvases.length,
-            offsetYBounds = this.opts.offsetYBounds,
-            stageScrollTop = stage.scrollTop;
+        var offsetYBounds = this.opts.offsetYBounds,
+            _stage = stage,
+            height = _stage.height,
+            width = _stage.width;
 
+
+        var i = this.canvases.length;
+
         while (i--) {
-
           var canvas = this.canvases[i],
               canvasHeight = canvas.size.height,
-              canvasOffset = canvas.offset,
-              canvasScrollDelta = canvasOffset.top + canvasHeight - stageScrollTop;
+              canvasOffset = canvas.offset;
 
-          if (canvas.isLoaded && canvasScrollDelta + offsetYBounds > 0 && canvasScrollDelta - offsetYBounds < stageScrollTop + stage.height) {
-            canvas.draw(stage);
+          if (canvas.isLoaded && scrollTop + stage.height + offsetYBounds > canvasOffset.top && canvasOffset.top + canvasHeight > scrollTop - offsetYBounds) {
+            canvas.draw({ height: height, scrollTop: scrollTop, width: width });
             this.trigger('draw', canvas.img);
@@ -521,3 +499,3 @@ }
 
-        this.trigger('update', stageScrollTop);
+        this.trigger('update', scrollTop);
 
@@ -524,0 +502,0 @@ return this;

dist/Parallax.min.js

@@ -1,1 +0,1 @@
-!function(t,e){if("function"==typeof define&&define.amd)define("Parallax",["module"],e);else if("undefined"!=typeof exports)e(module);else{var i={exports:{}};e(i),t.Parallax=i.exports}}(this,function(t){"use strict";function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){var i;return i="string"==typeof t?(e||document).querySelectorAll(t):t,Array.prototype.slice.call(i)}function n(t){for(var e,i=arguments,n=1;n<i.length;++n)if(e=i[n])for(var r in e)t[r]=e[r];return t}function r(t){return"undefined"==typeof t}function s(t){return t.replace(/-(\w)/g,function(t,e){return e.toUpperCase()})}function o(t,e){return e?t.dataset[e]||t.getAttribute("data-"+e):t.dataset||Array.prototype.slice.call(t.attributes).reduce(function(t,e){return/data-/.test(e.name)&&(t[s(e.name)]=e.value),t},{})}function a(t,e,i){for(var n=["ms","o","Moz","webkit",""],r=n.length;r--;){var s=n[r],o=s?s+e[0].toUpperCase()+e.substr(1):e.toLowerCase()+e.substr(1);if(o in t)return t[o]=i,!0}return!1}var u,h=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),c=function(t){function e(t,e){for(var i,n,r=t.split(" "),s=r.length,o=0;s>o;o++)i=r[o],n=i.indexOf("."),i&&e(~n?i.substring(0,n):i,o,~n?i.slice(n+1):null)}t=t||{};var i={},n=Array.prototype.slice;return Object.defineProperties(t,{on:{value:function(n,r){return"function"!=typeof r?t:(e(n,function(t,e,n){(i[t]=i[t]||[]).push(r),r.typed=e>0,r.ns=n}),t)},enumerable:!1,writable:!1,configurable:!1},off:{value:function(n,r){return"*"!=n||r?e(n,function(t,e,n){if(r||n)for(var s,o=i[t],a=0;s=o&&o[a];++a)(s==r||n&&s.ns==n)&&o.splice(a--,1);else delete i[t]}):i={},t},enumerable:!1,writable:!1,configurable:!1},one:{value:function(e,i){function n(){t.off(e,n),i.apply(t,arguments)}return t.on(e,n)},enumerable:!1,writable:!1,configurable:!1},trigger:{value:function(r){for(var s,o=arguments.length-1,a=new Array(o),u=0;o>u;u++)a[u]=arguments[u+1];return e(r,function(e,r,o){s=n.call(i[e]||[],0);for(var u,h=0;u=s[h];++h)u.busy||(u.busy=1,o&&u.ns!=o||u.apply(t,u.typed?[e].concat(a):a),s[h]!==u&&h--,u.busy=0);i["*"]&&"*"!=e&&t.trigger.apply(t,["*",e].concat(a))}),t},enumerable:!1,writable:!1,configurable:!1}}),t},l=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(t){setTimeout(t,1e3/60)},f=20,d=function(){function t(){e(this,t),c(this),this.resizeTimer=null,this.tick=!1,this.bind()}return h(t,[{key:"bind",value:function(){var t=this;return window.addEventListener("scroll",function(){return t.scroll()},!0),window.addEventListener("mousewheel",function(){return t.scroll()},!0),window.addEventListener("touchmove",function(){return t.scroll()},!0),window.addEventListener("resize",function(){return t.resize()},!0),window.addEventListener("orientationchange",function(){return t.resize()},!0),window.onload=function(){return t.scroll()},this}},{key:"scroll",value:function(){var t=this;return this.tick?this:(this.tick=!this.tick,l(function(){return t.update()}),this)}},{key:"update",value:function(){return this.trigger("scroll",this.scrollTop),this.tick=!this.tick,this}},{key:"resize",value:function(){var t=this;return this.resizeTimer&&clearTimeout(this.resizeTimer),this.resizeTimer=setTimeout(function(){return t.trigger("resize",t.size)},f),this}},{key:"scrollTop",get:function(){var t=(window.pageYOffset||document.scrollTop)-(document.clientTop||0);return window.isNaN(t)?0:t}},{key:"height",get:function(){return window.innerHeight}},{key:"width",get:function(){return window.innerWidth}},{key:"size",get:function(){return{width:this.width,height:this.height}}}]),t}(),g=function(t){return a(t.style,"transform","translate3d(0, 0, 0)"),/translate3d/g.test(t.style.cssText)}(document.createElement("div")),p=function(){function t(i,n){e(this,t),c(this),this.opts=n,this.img=i,this.wrapper=i.parentNode,this.isLoaded=!1}return h(t,[{key:"load",value:function(){var t=this;return this.img.width&&this.img.height&&this.img.complete?this.onImageLoaded():this.img.onload=function(){return t.onImageLoaded()},this}},{key:"onImageLoaded",value:function(){return this.isLoaded=!0,this.update(),this.trigger("loaded",this.img),this}},{key:"update",value:function(){var t,e,i,n,r=this.img.naturalWidth||this.img.width,s=this.img.naturalHeight||this.img.height,o=r/s,a=this.size;return a.width/o<=a.height?(e=a.height*o,t=a.height):(e=a.width,t=a.width/o),t<=a.height+a.height*this.opts.safeHeight&&(e+=e*this.opts.safeHeight,t+=t*this.opts.safeHeight),i=-~~((t-a.height)/2),n=-~~((e-a.width)/2),this.img.width=e,this.img.height=t,this.img.style.top=i+"px",this.img.style.left=n+"px",this}},{key:"draw",value:function(t){var e=this.size,i=(this.offset.top+e.height*this.opts.center+t.height/2-t.scrollTop)/t.height-1;return i*=this.img.height/e.height/2*this.opts.intensity,g?a(this.img.style,"transform","translate3d(0, "+-i+"%, 0)"):a(this.img.style,"transform","translate(0, "+-i+"%)"),this}},{key:"bounds",get:function(){return this.wrapper.getBoundingClientRect()}},{key:"offset",get:function(){return{top:this.wrapper.offsetTop,left:this.wrapper.offsetLeft}}},{key:"size",get:function(){var t=this.bounds;return{height:0|t.height,width:0|t.width}}}]),t}(),v=function(){function t(i){var n=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];return e(this,t),c(this),this.opts=n,this.selector=i,this.canvases=[],this.add(i),u||(u=new d),this}return h(t,[{key:"init",value:function(){return this.canvases.length?(this.imagesLoaded=0,this.bind()):console.warn('No images were found with the selector "'+this.selector+'"'),this}},{key:"bind",value:function(){var t=this;return this._onResize=function(){for(var e=arguments.length,i=Array(e),n=0;e>n;n++)i[n]=arguments[n];return t.resize.apply(t,i)},this._onScroll=function(){for(var e=arguments.length,i=Array(e),n=0;e>n;n++)i[n]=arguments[n];return t.scroll.apply(t,i)},u.on("resize",this._onResize),u.on("scroll",this._onScroll),this.canvases.forEach(function(e){e.one("loaded",function(){return t.onCanvasLoaded(e)}),e.load()}),this}},{key:"refresh",value:function(){return this.onResize(u.size).onScroll(u.scrollTop),this}},{key:"onCanvasLoaded",value:function(t){return this.trigger("image:loaded",t.img,t),this.imagesLoaded++,t.draw(u),this.imagesLoaded==this.canvases.length&&this.trigger("images:loaded"),this}},{key:"scroll",value:function(t){for(var e=this.canvases.length,i=this.opts.offsetYBounds,n=u.scrollTop;e--;){var r=this.canvases[e],s=r.size.height,o=r.offset,a=o.top+s-n;r.isLoaded&&a+i>0&&a-i<n+u.height&&(r.draw(u),this.trigger("draw",r.img))}return this.trigger("update",n),this}},{key:"add",value:function(t){return this.canvases=this.canvases.concat(this.createCanvases(i(t))),this}},{key:"remove",value:function(t){var e=this;return i(t).forEach(function(t){for(var i=e.canvases.length;i--;)if(t==e.canvases[i].img){e.canvases.splice(i,1);break}}),this}},{key:"destroy",value:function(){return this.off("*"),this.canvases=[],u.off("resize",this._onResize).off("scroll",this._onScroll),this}},{key:"resize",value:function(t){for(var e=this.canvases.length;e--;){var i=this.canvases[e];if(!i.isLoaded)return;i.update().draw(u)}return this.trigger("resize"),this}},{key:"createCanvases",value:function(t){var e=this;return t.map(function(t){var i=o(t);return new p(t,{intensity:r(i.intensity)?e.opts.intensity:+i.intensity,center:r(i.center)?e.opts.center:+i.center,safeHeight:r(i.safeHeight)?e.opts.safeHeight:+i.safeHeight})})}},{key:"opts",set:function(t){this._defaults={offsetYBounds:50,intensity:30,center:.5,safeHeight:.15},n(this._defaults,t)},get:function(){return this._defaults}}]),t}();t.exports=v});
+!function(t,e){if("function"==typeof define&&define.amd)define("Parallax",["module"],e);else if("undefined"!=typeof exports)e(module);else{var i={exports:{}};e(i),t.Parallax=i.exports}}(this,function(t){"use strict";function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){var i;return i="string"==typeof t?(e||document).querySelectorAll(t):t,Array.prototype.slice.call(i)}function n(t){for(var e=void 0,i=arguments,n=1;n<i.length;++n)if(e=i[n])for(var r in e)t[r]=e[r];return t}function r(t){return void 0===t}function s(t){return t.replace(/-(\w)/g,function(t,e){return e.toUpperCase()})}function o(t,e){return e?t.dataset[e]||t.getAttribute("data-"+e):t.dataset||Array.prototype.slice.call(t.attributes).reduce(function(t,e){return/data-/.test(e.name)&&(t[s(e.name)]=e.value),t},{})}function a(t,e){for(var i=["ms","o","Moz","webkit"],n=i.length;n--;){var r=i[n],s=r?r+e[0].toUpperCase()+e.substr(1):e.toLowerCase()+e.substr(1);if(s in t)return s}return""}var u=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),h=function(t){t=t||{};var e={},i=Array.prototype.slice;return Object.defineProperties(t,{on:{value:function(i,n){return"function"==typeof n&&(e[i]=e[i]||[]).push(n),t},enumerable:!1,writable:!1,configurable:!1},off:{value:function(i,n){if("*"!=i||n)if(n)for(var r,s=e[i],o=0;r=s&&s[o];++o)r==n&&s.splice(o--,1);else delete e[i];else e={};return t},enumerable:!1,writable:!1,configurable:!1},one:{value:function(e,i){function n(){t.off(e,n),i.apply(t,arguments)}return t.on(e,n)},enumerable:!1,writable:!1,configurable:!1},trigger:{value:function(n){var r,s,o,a=arguments.length-1,u=new Array(a);for(o=0;o<a;o++)u[o]=arguments[o+1];for(r=i.call(e[n]||[],0),o=0;s=r[o];++o)s.apply(t,u);return e["*"]&&"*"!=n&&t.trigger.apply(t,["*",n].concat(u)),t},enumerable:!1,writable:!1,configurable:!1}}),t},c=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(t){setTimeout(t,1e3/60)},l=function(){function t(){e(this,t),h(this),this.resizeTimer=null,this.tick=!1,this.bind()}return u(t,[{key:"bind",value:function(){var t=this;return window.addEventListener("scroll",function(){return t.scroll()},!0),window.addEventListener("mousewheel",function(){return t.scroll()},!0),window.addEventListener("touchmove",function(){return t.scroll()},!0),window.addEventListener("resize",function(){return t.resize()},!0),window.addEventListener("orientationchange",function(){return t.resize()},!0),window.onload=function(){return t.scroll()},this}},{key:"scroll",value:function(){var t=this;return this.tick?this:(this.tick=!this.tick,c(function(){return t.update()}),this)}},{key:"update",value:function(){return this.trigger("scroll",this.scrollTop),this.tick=!this.tick,this}},{key:"resize",value:function(){var t=this;return this.resizeTimer&&clearTimeout(this.resizeTimer),this.resizeTimer=setTimeout(function(){return t.trigger("resize",t.size)},20),this}},{key:"scrollTop",get:function(){var t=(window.pageYOffset||document.scrollTop)-(document.clientTop||0);return window.isNaN(t)?0:t}},{key:"height",get:function(){return window.innerHeight}},{key:"width",get:function(){return window.innerWidth}},{key:"size",get:function(){return{width:this.width,height:this.height}}}]),t}(),f=function(t){return a(t.style,"transform")}(document.createElement("div")),d=function(t){return t.style[f]="matrix(1, 0, 0, 1, 0, 0)",/matrix/g.test(t.style.cssText)}(document.createElement("div")),g=function(){function t(i,n){e(this,t),h(this),this.opts=n,this.img=i,this.wrapper=i.parentNode,this.isLoaded=!1}return u(t,[{key:"load",value:function(){var t=this;return this.img.width&&this.img.height&&this.img.complete?this.onImageLoaded():this.img.onload=function(){return t.onImageLoaded()},this}},{key:"onImageLoaded",value:function(){return this.isLoaded=!0,this.update(),this.trigger("loaded",this.img),this}},{key:"update",value:function(){var t=this.img.naturalWidth||this.img.width,e=this.img.naturalHeight||this.img.height,i=t/e,n=this.size,r=void 0,s=void 0,o=void 0,a=void 0;return n.width/i<=n.height?(s=n.height*i,r=n.height):(s=n.width,r=n.width/i),r<=n.height+n.height*this.opts.safeHeight&&(s+=s*this.opts.safeHeight,r+=r*this.opts.safeHeight),o=-~~((r-n.height)/2),a=-~~((s-n.width)/2),this.img.width=s,this.img.height=r,this.img.style.top=o+"px",this.img.style.left=a+"px",this}},{key:"draw",value:function(t){var e=t.scrollTop,i=(t.width,t.height),n=this.size,r=(this.offset.top+n.height*this.opts.center+i/2-e)/i-1,s=~~(r*(this.img.height/n.height/2*this.opts.intensity)*10);return this.img.style[f]=d?"matrix(1,0,0,1, 0, "+-s+")":"translate(0, "+-s+"px)",this}},{key:"bounds",get:function(){return this.wrapper.getBoundingClientRect()}},{key:"offset",get:function(){return{top:this.wrapper.offsetTop,left:this.wrapper.offsetLeft}}},{key:"size",get:function(){var t=this.bounds;return{height:0|t.height,width:0|t.width}}}]),t}(),v=void 0,p=function(){function t(i){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return e(this,t),h(this),this.opts=n,this.selector=i,this.canvases=[],this.add(i),v||(v=new l),this}return u(t,[{key:"init",value:function(){return this.canvases.length?(this.imagesLoaded=0,this.bind()):console.warn('No images were found with the selector "'+this.selector+'"'),this}},{key:"bind",value:function(){var t=this;return this._onResize=function(){for(var e=arguments.length,i=Array(e),n=0;n<e;n++)i[n]=arguments[n];return t.resize.apply(t,i)},this._onScroll=function(){for(var e=arguments.length,i=Array(e),n=0;n<e;n++)i[n]=arguments[n];return t.scroll.apply(t,i)},v.on("resize",this._onResize),v.on("scroll",this._onScroll),this.canvases.forEach(function(e){e.one("loaded",function(){return t.onCanvasLoaded(e)}),e.load()}),this}},{key:"refresh",value:function(){return this.onResize(v.size).onScroll(v.scrollTop),this}},{key:"onCanvasLoaded",value:function(t){return this.trigger("image:loaded",t.img,t),this.imagesLoaded++,t.draw(v),this.imagesLoaded==this.canvases.length&&this.trigger("images:loaded"),this}},{key:"scroll",value:function(t){for(var e=this.opts.offsetYBounds,i=v,n=i.height,r=i.width,s=this.canvases.length;s--;){var o=this.canvases[s],a=o.size.height,u=o.offset;o.isLoaded&&t+v.height+e>u.top&&u.top+a>t-e&&(o.draw({height:n,scrollTop:t,width:r}),this.trigger("draw",o.img))}return this.trigger("update",t),this}},{key:"add",value:function(t){return this.canvases=this.canvases.concat(this.createCanvases(i(t))),this}},{key:"remove",value:function(t){var e=this;return i(t).forEach(function(t){for(var i=e.canvases.length;i--;)if(t==e.canvases[i].img){e.canvases.splice(i,1);break}}),this}},{key:"destroy",value:function(){return this.off("*"),this.canvases=[],v.off("resize",this._onResize).off("scroll",this._onScroll),this}},{key:"resize",value:function(t){for(var e=this.canvases.length;e--;){var i=this.canvases[e];if(!i.isLoaded)return;i.update().draw(v)}return this.trigger("resize"),this}},{key:"createCanvases",value:function(t){var e=this;return t.map(function(t){var i=o(t);return new g(t,{intensity:r(i.intensity)?e.opts.intensity:+i.intensity,center:r(i.center)?e.opts.center:+i.center,safeHeight:r(i.safeHeight)?e.opts.safeHeight:+i.safeHeight})})}},{key:"opts",set:function(t){this._defaults={offsetYBounds:50,intensity:30,center:.5,safeHeight:.15},n(this._defaults,t)},get:function(){return this._defaults}}]),t}();t.exports=p});

package.json

 {
   "name": "scroll-parallax",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "ES6/ES2015 unobstrusive modern HW accelerated scrollable images parallax",
@@ -31,24 +31,24 @@ "main": "index.js",
   "devDependencies": {
-    "babel-core": "^6.7.7",
-    "babel-plugin-transform-es2015-modules-umd": "^6.6.5",
-    "babel-preset-es2015": "^6.6.0",
+    "babel-core": "^6.24.0",
+    "babel-plugin-transform-es2015-modules-umd": "^6.24.0",
+    "babel-preset-es2015": "^6.24.0",
     "chai": "^3.5.0",
-    "chokidar": "^1.4.3",
-    "eslint": "^2.8.0",
-    "karma": "^0.13.22",
+    "chokidar": "^1.6.1",
+    "eslint": "^3.18.0",
+    "karma": "^1.5.0",
     "karma-babel-preprocessor": "^6.0.1",
-    "karma-coverage": "^0.5.5",
-    "karma-mocha": "^0.2.2",
-    "karma-phantomjs-launcher": "^1.0.0",
-    "karma-sauce-launcher": "^0.3.1",
+    "karma-coverage": "^1.1.1",
+    "karma-mocha": "^1.3.0",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "karma-sauce-launcher": "^1.1.0",
     "mkdirp": "^0.5.1",
-    "mocha": "^2.4.5",
-    "phantomjs-prebuilt": "^2.1.7",
-    "rollup": "^0.26.0",
-    "rollup-plugin-commonjs": "^2.2.1",
-    "rollup-plugin-npm": "^1.4.0",
-    "serve": "^1.4.0",
-    "sinon": "^1.17.3",
-    "sinon-chai": "^2.8.0",
-    "uglify-js": "^2.6.2"
+    "mocha": "^3.2.0",
+    "phantomjs-prebuilt": "^2.1.14",
+    "rollup": "^0.41.6",
+    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-node-resolve": "^2.0.0",
+    "serve": "^5.1.1",
+    "sinon": "^2.1.0",
+    "sinon-chai": "^2.9.0",
+    "uglify-js": "^2.8.14"
   },
@@ -62,4 +62,4 @@ "author": "Gianluca Guarini (http://gianlucaguarini.com/)",
   "dependencies": {
-    "riot-observable": "^2.4.2"
+    "riot-observable": "^3.0.0"
   }
 }

src/Canvas.js

@@ -11,6 +11,9 @@ /**
  */
-const HAS_TRANSLATE_3D = (function(div) {
-  prefix(div.style, 'transform', 'translate3d(0, 0, 0)')
-  return /translate3d/g.test(div.style.cssText)
+const TRANSFORM_PREFIX = (function(div) {
+  return prefix(div.style, 'transform')
 })(document.createElement('div'))
+const HAS_MATRIX = (function(div) {
+  div.style[TRANSFORM_PREFIX] = 'matrix(1, 0, 0, 1, 0, 0)'
+  return /matrix/g.test(div.style.cssText)
+})(document.createElement('div'))
 
@@ -31,3 +34,2 @@ export default class Canvas {
   load() {
-
     if (!this.img.width || !this.img.height || !this.img.complete)
@@ -54,12 +56,9 @@ this.img.onload = () => this.onImageLoaded()
   update() {
-
-    var iw = this.img.naturalWidth || this.img.width,
+    const iw = this.img.naturalWidth || this.img.width,
       ih = this.img.naturalHeight || this.img.height,
       ratio = iw / ih,
-      size = this.size,
-      nh,
-      nw,
-      offsetTop,
-      offsetLeft
+      size = this.size
 
+    let nh, nw, offsetTop, offsetLeft
+
     // calculate the new width and the height
@@ -96,4 +95,4 @@ // keeping the image ratio
    */
-  draw(stage) {
-    var size = this.size,
+  draw({ scrollTop, width, height }) {
+    const size = this.size,
       // this value will be:
@@ -103,11 +102,8 @@ //  < 0 when the image is on the top
       //  > 0 when the image is at the bottom
-      perc = (this.offset.top + size.height * this.opts.center + stage.height / 2 - stage.scrollTop) / stage.height - 1
-    // increase the percentage effect according to the intensity
-    // and the current image height
-    perc *= this.img.height / size.height / 2 * this.opts.intensity
+      perc = (this.offset.top + size.height * this.opts.center + height / 2 - scrollTop) / height - 1,
+      // increase the percentage effect according to the intensity
+      // and the current image height
+      offset = ~~(perc * (this.img.height / size.height / 2 * this.opts.intensity) * 10)
 
-    if (HAS_TRANSLATE_3D)
-      prefix(this.img.style, 'transform', `translate3d(0, ${-perc}%, 0)`)
-    else
-      prefix(this.img.style, 'transform', `translate(0, ${-perc}%)`)
+    this.img.style[TRANSFORM_PREFIX] = HAS_MATRIX ? `matrix(1,0,0,1, 0, ${-offset})` : `translate(0, ${-offset}px)`
 
@@ -139,3 +135,3 @@ return this
   get size() {
-    var props = this.bounds
+    const props = this.bounds
     return {
@@ -142,0 +138,0 @@ height: props.height | 0,

src/helpers/helpers.js

@@ -41,6 +41,6 @@ /**
 export function extend(src) {
-  var obj, args = arguments
-  for (var i = 1; i < args.length; ++i) {
+  let obj, args = arguments
+  for (let i = 1; i < args.length; ++i) {
     if (obj = args[i]) {
-      for (var key in obj) {
+      for (let key in obj) { // eslint-disable-line
         src[key] = obj[key]
@@ -88,14 +88,14 @@ }
 }
+
 /**
  * Prefix any fancy browser object property
  * @param   { Object } obj - object we want to update normally el.style
- * @param   { String } prop - the new object property we want to set
- * @param   { * } value - new value we want to assign to the prefixed property
- * @returns { Boolean } - return whether the feature is supported
+ * @param   { String } prop - the css property we want to prefix
+ * @returns { Boolean } - return the css property prefixed
  */
-export function prefix(obj, prop, value) {
-  var prefixes = ['ms', 'o', 'Moz', 'webkit', ''],
-    i = prefixes.length
+export function prefix(obj, prop) {
+  const prefixes = ['ms', 'o', 'Moz', 'webkit']
+  let i = prefixes.length
   while (i--) {
-    var prefix = prefixes[i],
+    const prefix = prefixes[i],
       // check if the prefix exists othewise we will use the unprefixed version
@@ -105,7 +105,6 @@ // 4 ex using Transform: transform, webkitTransform, MozTransform, oTransform, msTransform
     if (p in obj) {
-      obj[p] = value
-      return true
+      return p
     }
   }
-  return false
+  return ''
 }

src/index.js

@@ -11,7 +11,8 @@ import { $, $$, extend, isUndefined, elementData } from './helpers/helpers'
  */
-var stage
+let stage
 
 /**
- * @class
- * An awesome script
+ * Parallax class
+ * @param { String } selector - the tag selector where we will bind the parallax
+ * @param { Object } opts - parallax options
  */
@@ -34,2 +35,3 @@ class Parallax {
   }
+
   /**
@@ -50,2 +52,3 @@ * Initialize the parallax
   }
+
   /**
@@ -72,2 +75,3 @@ * Bind the instance events setting all the callbacks
   }
+
   /**
@@ -81,2 +85,3 @@ * Force manually a redraw
   }
+
   /**
@@ -94,2 +99,3 @@ * Callback triggered once a canvas has loaded its image
   }
+
   /**
@@ -101,19 +107,18 @@ * Callback triggered on scroll
   scroll(scrollTop) {
-    var i = this.canvases.length,
-      offsetYBounds = this.opts.offsetYBounds,
-      stageScrollTop = stage.scrollTop
+    const offsetYBounds = this.opts.offsetYBounds,
+      { height, width } = stage
 
+    let i = this.canvases.length
+
     while (i--) {
-
       let canvas = this.canvases[i],
         canvasHeight = canvas.size.height,
-        canvasOffset = canvas.offset,
-        canvasScrollDelta = canvasOffset.top + canvasHeight - stageScrollTop
+        canvasOffset = canvas.offset
 
       if (
         canvas.isLoaded &&
-        canvasScrollDelta + offsetYBounds > 0 &&
-        canvasScrollDelta - offsetYBounds < stageScrollTop + stage.height
+        scrollTop + stage.height + offsetYBounds > canvasOffset.top &&
+        canvasOffset.top + canvasHeight > scrollTop - offsetYBounds
       ) {
-        canvas.draw(stage)
+        canvas.draw({ height, scrollTop, width })
         this.trigger('draw', canvas.img)
@@ -124,6 +129,7 @@ }
 
-    this.trigger('update', stageScrollTop)
+    this.trigger('update', scrollTop)
 
     return this
   }
+
   /**
@@ -138,2 +144,3 @@ * Add parallax elements to this parallax instance
   }
+
   /**
@@ -146,3 +153,3 @@ * Remove parallax elements from this parallax instance
     $$(els).forEach((el) => {
-      var i = this.canvases.length
+      let i = this.canvases.length
       while (i--) {
@@ -157,2 +164,3 @@ if (el == this.canvases[i].img) {
   }
+
   /**
@@ -168,2 +176,3 @@ * Kill all the internal and external callbacks listening this instance events
   }
+
   /**
@@ -175,5 +184,5 @@ * Callback triggered on window resize
   resize(size) {
-    var i = this.canvases.length
+    let i = this.canvases.length
     while (i--) {
-      var canvas = this.canvases[i]
+      const canvas = this.canvases[i]
       if (!canvas.isLoaded) return
@@ -185,2 +194,3 @@ canvas.update().draw(stage)
   }
+
   /**
@@ -193,3 +203,3 @@ * Set the canvases instances
     return els.map(el => {
-      var data = elementData(el)
+      const data = elementData(el)
       return new Canvas(el, {
@@ -202,2 +212,3 @@ intensity: !isUndefined(data.intensity) ? +data.intensity : this.opts.intensity,
   }
+
   /**
@@ -218,2 +229,3 @@ * The options will be always set extending the script _defaults
   }
+
   /**
@@ -220,0 +232,0 @@ * Get the script options object

src/Stage.js

@@ -29,3 +29,2 @@ /**
   bind() {
-
     window.addEventListener('scroll',  () => this.scroll(), true)
@@ -32,0 +31,0 @@ window.addEventListener('mousewheel', () => this.scroll(), true)

tasks/build.js

@@ -5,3 +5,3 @@ var utils = require('./_utils'),
   fs = require('fs'),
-  npm = require('rollup-plugin-npm'),
+  npm = require('rollup-plugin-node-resolve'),
   commonjs = require('rollup-plugin-commonjs'),
@@ -60,4 +60,3 @@ babel = require('babel-core')
         } catch (e) {
-          utils.print(e, 'error')
-          reject()
+          reject(e)
         }
@@ -64,0 +63,0 @@

tasks/watch.js

@@ -39,4 +39,5 @@ var utils = require('./_utils'),
       .then(build)
+      .catch(e => utils.print(e, 'error'))
   })
 
 }

No alert changes

Worsened metrics

Total package byte prevSize

3006328

decreased by-0.02%

Lines of code

1545

decreased by-1.53%

Dependency changes

• + Addedriot-observable@3.0.0(transitive)

• - Removedriot-observable@2.5.0(transitive)

• Updatedriot-observable@^3.0.0