scroll-parallax - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0

CHANGELOG.md

 ## Changelog
 
+### 2.1.0
+  * added: the possibility to instantiate the `Parallax` class with out DOM selectors
+  * updated: improved the destroy method restoring the initial DOM elements state
+  * fixed: https://github.com/GianlucaGuarini/parallax/issues/7 thanks to https://github.com/GianlucaGuarini/parallax/pulls/14
+
 ### 2.0.2
@@ -18,3 +23,3 @@ * fixed: missing minified version of the script
 ### 1.0.4
-  * updated: riot-observable dependecy to get faster performances (30% faster)
+  * updated: riot-observable dependency to get faster performances (30% faster)
 
@@ -21,0 +26,0 @@ ### 1.0.3

dist/Parallax.js

@@ -41,4 +41,10 @@ (function (global, factory) {
   function $$(selector, ctx) {
-    var els;
-    if (typeof selector == 'string') els = (ctx || document).querySelectorAll(selector);else els = selector;
+    var els = void 0;
+
+    if (typeof selector == 'string') {
+      els = (ctx || document).querySelectorAll(selector);
+    } else {
+      els = selector;
+    }
+
     return Array.prototype.slice.call(els);
@@ -287,2 +293,4 @@ }
       this.isLoaded = false;
+
+      this.initial = img.cloneNode(true);
     }
@@ -295,5 +303,9 @@
 
-        if (!this.img.width || !this.img.height || !this.img.complete) this.img.onload = function () {
-          return _this4.onImageLoaded();
-        };else this.onImageLoaded();
+        if (!this.img.width || !this.img.height || !this.img.complete) {
+          this.img.onload = function () {
+            return _this4.onImageLoaded();
+          };
+        } else {
+          this.onImageLoaded();
+        }
 
@@ -303,2 +315,8 @@ return this;
     }, {
+      key: 'destroy',
+      value: function destroy() {
+        this.img.parentNode.replaceChild(this.initial, this.img);
+        this.off('*');
+      }
+    }, {
       key: 'onImageLoaded',
@@ -393,3 +411,4 @@ value: function onImageLoaded() {
   var Parallax = function () {
-    function Parallax(selector) {
+    function Parallax() {
+      var selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -404,4 +423,8 @@
       this.canvases = [];
-      this.add(selector);
+      this.bound = false;
 
+      if (selector !== null) {
+        this.add(selector);
+      }
+
       if (!stage) stage = new Stage();
@@ -416,3 +439,7 @@
 
-        if (!this.canvases.length) {
+        if (this.bound) {
+          throw 'The parallax instance has already been initialized';
+        }
+
+        if (!this.canvases.length && this.selector !== null) {
           console.warn('No images were found with the selector "' + this.selector + '"');
@@ -456,2 +483,4 @@ } else {
 
+        this.bound = true;
+
         return this;
@@ -503,3 +532,17 @@ }
       value: function add(els) {
-        this.canvases = this.canvases.concat(this.createCanvases($$(els)));
+        var _this6 = this;
+
+        var canvases = this.createCanvases($$(els));
+
+        if (this.bound) {
+          canvases.forEach(function (canvas) {
+            canvas.one('loaded', function () {
+              return _this6.onCanvasLoaded(canvas);
+            });
+            canvas.load();
+          });
+        }
+
+        this.canvases = this.canvases.concat(canvases);
+
         return this;
@@ -510,9 +553,10 @@ }
       value: function remove(els) {
-        var _this6 = this;
+        var _this7 = this;
 
         $$(els).forEach(function (el) {
-          var i = _this6.canvases.length;
+          var i = _this7.canvases.length;
           while (i--) {
-            if (el == _this6.canvases[i].img) {
-              _this6.canvases.splice(i, 1);
+            if (el == _this7.canvases[i].img) {
+              _this7.canvases[i].destroy();
+              _this7.canvases.splice(i, 1);
               break;
@@ -547,3 +591,3 @@ }
       value: function createCanvases(els) {
-        var _this7 = this;
+        var _this8 = this;
 
@@ -553,5 +597,5 @@ return els.map(function (el) {
           return new Canvas(el, {
-            intensity: !isUndefined(data.intensity) ? +data.intensity : _this7.opts.intensity,
-            center: !isUndefined(data.center) ? +data.center : _this7.opts.center,
-            safeHeight: !isUndefined(data.safeHeight) ? +data.safeHeight : _this7.opts.safeHeight
+            intensity: !isUndefined(data.intensity) ? +data.intensity : _this8.opts.intensity,
+            center: !isUndefined(data.center) ? +data.center : _this8.opts.center,
+            safeHeight: !isUndefined(data.safeHeight) ? +data.safeHeight : _this8.opts.safeHeight
           });
@@ -558,0 +602,0 @@ });

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=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 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}}(),u=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,h=new Array(a);for(o=0;o<a;o++)h[o]=arguments[o+1];for(r=i.call(e[n]||[],0),o=0;s=r[o];++o)s.apply(t,h);return e["*"]&&"*"!=n&&t.trigger.apply(t,["*",n].concat(h)),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),u(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,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=a(document.createElement("div").style,"transform"),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),u(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.img.style.willChange="transform",this.trigger("loaded",this.img),this}},{key:"update",value:function(){var t=(this.img.naturalWidth||this.img.width)/(this.img.naturalHeight||this.img.height),e=this.size,i=void 0,n=void 0,r=void 0,s=void 0;return e.width/t<=e.height?(n=e.height*t,i=e.height):(n=e.width,i=e.width/t),i<=e.height+e.height*this.opts.safeHeight&&(n+=n*this.opts.safeHeight,i+=i*this.opts.safeHeight),r=-~~((i-e.height)/2),s=-~~((n-e.width)/2),this.img.width=n,this.img.height=i,this.img.style.top=r+"px",this.img.style.left=s+"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)*(this.img.height/n.height/2*this.opts.intensity)*10);return this.img.style[f]=d?"matrix(1,0,0,1, 0, "+-r+")":"translate(0, "+-r+"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),u(this),this.opts=n,this.selector=i,this.canvases=[],this.add(i),v||(v=new l),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;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,h=o.offset;o.isLoaded&&t+v.height+e>h.top&&h.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});
+!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=void 0;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 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}}(),u=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,h=new Array(a);for(o=0;o<a;o++)h[o]=arguments[o+1];for(r=i.call(e[n]||[],0),o=0;s=r[o];++o)s.apply(t,h);return e["*"]&&"*"!=n&&t.trigger.apply(t,["*",n].concat(h)),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)},c=function(){function t(){e(this,t),u(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)},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=a(document.createElement("div").style,"transform"),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),u(this),this.opts=n,this.img=i,this.wrapper=i.parentNode,this.isLoaded=!1,this.initial=i.cloneNode(!0)}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:"destroy",value:function(){this.img.parentNode.replaceChild(this.initial,this.img),this.off("*")}},{key:"onImageLoaded",value:function(){return this.isLoaded=!0,this.update(),this.img.style.willChange="transform",this.trigger("loaded",this.img),this}},{key:"update",value:function(){var t=(this.img.naturalWidth||this.img.width)/(this.img.naturalHeight||this.img.height),e=this.size,i=void 0,n=void 0,r=void 0,s=void 0;return e.width/t<=e.height?(n=e.height*t,i=e.height):(n=e.width,i=e.width/t),i<=e.height+e.height*this.opts.safeHeight&&(n+=n*this.opts.safeHeight,i+=i*this.opts.safeHeight),r=-~~((i-e.height)/2),s=-~~((n-e.width)/2),this.img.width=n,this.img.height=i,this.img.style.top=r+"px",this.img.style.left=s+"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)*(this.img.height/n.height/2*this.opts.intensity)*10);return this.img.style[f]=d?"matrix(1,0,0,1, 0, "+-r+")":"translate(0, "+-r+"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(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return e(this,t),u(this),this.opts=n,this.selector=i,this.canvases=[],this.bound=!1,null!==i&&this.add(i),v||(v=new c),this}return h(t,[{key:"init",value:function(){if(this.bound)throw"The parallax instance has already been initialized";return this.canvases.length||null===this.selector?(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.bound=!0,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,h=o.offset;o.isLoaded&&t+v.height+e>h.top&&h.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){var e=this,n=this.createCanvases(i(t));return this.bound&&n.forEach(function(t){t.one("loaded",function(){return e.onCanvasLoaded(t)}),t.load()}),this.canvases=this.canvases.concat(n),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[i].destroy(),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": "2.0.2",
+  "version": "2.1.0",
   "description": "ES6/ES2015 unobstrusive modern HW accelerated scrollable images parallax",
@@ -31,24 +31,24 @@ "main": "index.js",
   "devDependencies": {
-    "babel-core": "^6.25.0",
+    "babel-core": "^6.26.0",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
     "babel-preset-es2015": "^6.24.1",
-    "chai": "^4.0.2",
+    "chai": "^4.1.2",
     "chokidar": "^1.7.0",
-    "eslint": "^4.1.1",
-    "karma": "^1.7.0",
-    "karma-babel-preprocessor": "^6.0.1",
+    "eslint": "^4.13.1",
+    "karma": "^1.7.1",
+    "karma-babel-preprocessor": "^7.0.0",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",
     "karma-phantomjs-launcher": "^1.0.4",
-    "karma-sauce-launcher": "^1.1.0",
+    "karma-sauce-launcher": "^1.2.0",
     "mkdirp": "^0.5.1",
-    "mocha": "^3.4.2",
-    "phantomjs-prebuilt": "^2.1.14",
-    "rollup": "^0.43.0",
-    "rollup-plugin-commonjs": "^8.0.2",
+    "mocha": "^4.0.1",
+    "phantomjs-prebuilt": "^2.1.16",
+    "rollup": "^0.52.1",
+    "rollup-plugin-commonjs": "^8.2.6",
     "rollup-plugin-node-resolve": "^3.0.0",
-    "serve": "^6.0.2",
-    "sinon": "^2.3.6",
-    "sinon-chai": "^2.11.0",
-    "uglify-js": "^3.0.23"
+    "serve": "^6.4.4",
+    "sinon": "^4.1.3",
+    "sinon-chai": "^2.14.0",
+    "uglify-js": "^3.2.2"
   },
@@ -55,0 +55,0 @@ "author": "Gianluca Guarini (http://gianlucaguarini.com/)",

src/Canvas.js

@@ -11,6 +11,6 @@ /**
  */
-const TRANSFORM_PREFIX = (function(div) {
+const TRANSFORM_PREFIX = (function (div) {
   return prefix(div.style, 'transform')
 })(document.createElement('div'))
-const HAS_MATRIX = (function(div) {
+const HAS_MATRIX = (function (div) {
   div.style[TRANSFORM_PREFIX] = 'matrix(1, 0, 0, 1, 0, 0)'
@@ -28,2 +28,5 @@ return /matrix/g.test(div.style.cssText)
     this.isLoaded = false
+
+    // store the initial image properties - deep clone
+    this.initial = img.cloneNode(true)
   }
@@ -35,8 +38,17 @@ /**
   load() {
-    if (!this.img.width || !this.img.height || !this.img.complete)
+
+    if (!this.img.width || !this.img.height || !this.img.complete) {
       this.img.onload = () => this.onImageLoaded()
-    else this.onImageLoaded()
+    } else {
+      this.onImageLoaded()
+    }
 
     return this
   }
+
+  destroy() {
+    this.img.parentNode.replaceChild(this.initial, this.img)
+    this.off('*')
+  }
+
   /**
@@ -43,0 +55,0 @@ * Callback triggered when the image gets loaded

src/helpers/helpers.js

@@ -13,7 +13,10 @@ /**
 export function $$(selector, ctx) {
-  var els
-  if (typeof selector == 'string')
+  let els
+
+  if (typeof selector == 'string') {
     els = (ctx || document).querySelectorAll(selector)
-  else
+  } else {
     els = selector
+  }
+
   return Array.prototype.slice.call(els)
@@ -67,3 +70,3 @@ }
 export function toCamel(string) {
-  return string.replace(/-(\w)/g, function(_, c) {
+  return string.replace(/-(\w)/g, function (_, c) {
     return c.toUpperCase()
@@ -70,0 +73,0 @@ })

src/index.js

@@ -19,3 +19,3 @@ import { $, $$, extend, isUndefined, elementData } from './helpers/helpers'
 class Parallax {
-  constructor(selector, opts = {}) {
+  constructor(selector = null, opts = {}) {
 
@@ -28,3 +28,9 @@ // make this object observable
     this.canvases = []
-    this.add(selector)
+    this.bound = false
+
+    // allow to initialize without adding any dom elements
+    if (selector !== null) {
+      this.add(selector)
+    }
+
     // lazy stage instance initialization
@@ -43,3 +49,7 @@ if (!stage)
 
-    if (!this.canvases.length) {
+    if (this.bound) {
+      throw 'The parallax instance has already been initialized'
+    }
+
+    if (!this.canvases.length && this.selector !== null) {
       console.warn(`No images were found with the selector "${this.selector}"`)
@@ -73,2 +83,4 @@ } else {
 
+    this.bound = true
+
     return this
@@ -93,3 +105,3 @@ }
     this.trigger('image:loaded', canvas.img, canvas)
-    this.imagesLoaded ++
+    this.imagesLoaded++
     canvas.draw(stage)
@@ -138,3 +150,13 @@ if (this.imagesLoaded == this.canvases.length) this.trigger('images:loaded')
   add(els) {
-    this.canvases = this.canvases.concat(this.createCanvases($$(els)))
+    const canvases = this.createCanvases($$(els))
+
+    if (this.bound) {
+      canvases.forEach((canvas) => {
+        canvas.one('loaded', () => this.onCanvasLoaded(canvas))
+        canvas.load()
+      })
+    }
+
+    this.canvases = this.canvases.concat(canvases)
+
     return this
@@ -153,2 +175,3 @@ }
         if (el == this.canvases[i].img) {
+          this.canvases[i].destroy()
           this.canvases.splice(i, 1)
@@ -209,3 +232,3 @@ break
    */
-  set opts (opts) {
+  set opts(opts) {
     this._defaults = {
@@ -212,0 +235,0 @@ offsetYBounds: 50,

test/specs/core.specs.js

 /* global Parallax */
-describe('Core', function() {
+describe('Core', function () {
 
@@ -34,3 +34,3 @@ this.timeout(5000)
     var i = 2
-    while (i --) {
+    while (i--) {
       addImage()
@@ -57,2 +57,14 @@ }
 
+  it('It can be initialized without nodes', () => {
+    p = new Parallax(null).init()
+    expect(p.canvases).to.have.length(0)
+  })
+
+  it('It can have images added after null node initialization', () => {
+    p = new Parallax(null).init()
+    expect(p.canvases).to.have.length(0)
+    p.add('.parallax')
+    expect(p.canvases).to.have.length(2)
+  })
+
   it('The "image:loaded", "images:loaded", "draw","resize" events get called', (done) => {
@@ -71,4 +83,4 @@ var imagesLoaded = sinon.spy(),
 
-      p.resize({width: 300, height: 300})
-      p.resize({width: 500, height: 500})
+      p.resize({ width: 300, height: 300 })
+      p.resize({ width: 500, height: 500 })
       p.scroll(300)
@@ -75,0 +87,0 @@ expect(imagesLoaded).to.have.callCount(2)

No alert changes

Improved metrics

Total package byte prevSize

3009301

increased by0.09%

Lines of code

1616

increased by4.46%

Worsened metrics

Number of package files

33

decreased by-2.94%

No dependency changes