scroll-parallax - npm Package Compare versions

Comparing version 2.1.0 to 3.0.0

CHANGELOG.md

 ## Changelog
 
+
+### 3.0.0
+  * added: video capabilities https://github.com/GianlucaGuarini/parallax/pull/19
+  * updated: renamed `image:loaded` and `images:loaded` => `element:loaded` and `elements:loaded`
+  * fixed: npm vulnerabilites and updated dev dependencies
+
 ### 2.1.0
@@ -4,0 +10,0 @@ * added: the possibility to instantiate the `Parallax` class with out DOM selectors

dist/Parallax.js

@@ -284,3 +284,3 @@ (function (global, factory) {
   var Canvas = function () {
-    function Canvas(img, opts) {
+    function Canvas(element, opts) {
       _classCallCheck(this, Canvas);
@@ -290,7 +290,7 @@
       this.opts = opts;
-      this.img = img;
-      this.wrapper = img.parentNode;
+      this.element = element;
+      this.wrapper = element.parentNode;
       this.isLoaded = false;
 
-      this.initial = img.cloneNode(true);
+      this.initial = element.cloneNode(true);
     }
@@ -303,8 +303,15 @@
 
-        if (!this.img.width || !this.img.height || !this.img.complete) {
-          this.img.onload = function () {
-            return _this4.onImageLoaded();
+        var isImage = this.element.complete !== undefined;
+        var isVideo = this.element.oncanplay !== undefined;
+
+        if (isImage && !this.element.complete) {
+          this.element.onload = function () {
+            return _this4.onElementLoaded();
           };
+        } else if (isVideo && !this.element.oncanplay) {
+          this.element.onload = this.element.oncanplay = function () {
+            return _this4.onElementLoaded();
+          };
         } else {
-          this.onImageLoaded();
+          this.onElementLoaded();
         }
@@ -317,12 +324,12 @@
       value: function destroy() {
-        this.img.parentNode.replaceChild(this.initial, this.img);
+        this.element.parentNode.replaceChild(this.initial, this.element);
         this.off('*');
       }
     }, {
-      key: 'onImageLoaded',
-      value: function onImageLoaded() {
+      key: 'onElementLoaded',
+      value: function onElementLoaded() {
         this.isLoaded = true;
         this.update();
-        this.img.style.willChange = 'transform';
-        this.trigger('loaded', this.img);
+        this.element.style.willChange = 'transform';
+        this.trigger('loaded', this.element);
         return this;
@@ -333,4 +340,4 @@ }
       value: function update() {
-        var iw = this.img.naturalWidth || this.img.width,
-            ih = this.img.naturalHeight || this.img.height,
+        var iw = this.element.naturalWidth || this.element.width || this.element.offsetWidth,
+            ih = this.element.naturalHeight || this.element.height || this.element.offsetHeight,
             ratio = iw / ih,
@@ -360,6 +367,6 @@ size = this.size;
 
-        this.img.width = nw;
-        this.img.height = nh;
-        this.img.style.top = offsetTop + 'px';
-        this.img.style.left = offsetLeft + 'px';
+        this.element.width = nw;
+        this.element.height = nh;
+        this.element.style.top = offsetTop + 'px';
+        this.element.style.left = offsetLeft + 'px';
 
@@ -377,5 +384,5 @@ return this;
             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);
+            offset = ~~(perc * (this.element.height / size.height / 2 * this.opts.intensity) * 10);
 
-        this.img.style[TRANSFORM_PREFIX] = HAS_MATRIX ? 'matrix(1,0,0,1, 0, ' + -offset + ')' : 'translate(0, ' + -offset + 'px)';
+        this.element.style[TRANSFORM_PREFIX] = HAS_MATRIX ? 'matrix(1,0,0,1, 0, ' + -offset + ')' : 'translate(0, ' + -offset + 'px)';
 
@@ -439,3 +446,2 @@ return this;
       value: function init() {
-
         if (this.bound) {
@@ -446,5 +452,5 @@ 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 + '"');
+          console.warn('No elements were found with the selector "' + this.selector + '"');
         } else {
-          this.imagesLoaded = 0;
+          this.elementsLoaded = 0;
           this.bind();
@@ -498,6 +504,6 @@ }
       value: function onCanvasLoaded(canvas) {
-        this.trigger('image:loaded', canvas.img, canvas);
-        this.imagesLoaded++;
+        this.trigger('element:loaded', canvas.element, canvas);
+        this.elementsLoaded++;
         canvas.draw(stage);
-        if (this.imagesLoaded == this.canvases.length) this.trigger('images:loaded');
+        if (this.elementsLoaded == this.canvases.length) this.trigger('elements:loaded');
         return this;
@@ -523,3 +529,3 @@ }
             canvas.draw({ height: height, scrollTop: scrollTop, width: width });
-            this.trigger('draw', canvas.img);
+            this.trigger('draw', canvas.element);
           }
@@ -560,3 +566,3 @@ }
           while (i--) {
-            if (el == _this7.canvases[i].img) {
+            if (el == _this7.canvases[i].element) {
               _this7.canvases[i].destroy();
@@ -563,0 +569,0 @@ _this7.canvases.splice(i, 1);

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

package.json

 {
   "name": "scroll-parallax",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "ES6/ES2015 unobstrusive modern HW accelerated scrollable images parallax",
@@ -8,3 +8,3 @@ "main": "index.js",
   "scripts": {
-    "test": "node make test",
+    "test": "npm run eslint && node make test",
     "test-coveralls": "PARALLAX_COV=1 cat ./coverage/report-lcov/lcov.info | coveralls",
@@ -32,11 +32,11 @@ "serve": "node make serve",
   "devDependencies": {
-    "babel-core": "^6.26.0",
+    "babel-core": "^6.26.3",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
     "babel-preset-es2015": "^6.24.1",
-    "chai": "^4.1.2",
-    "chokidar": "^1.7.0",
-    "eslint": "^4.13.1",
-    "karma": "^1.7.1",
+    "chai": "^4.2.0",
+    "chokidar": "^2.0.4",
+    "eslint": "^5.8.0",
+    "karma": "^3.1.1",
     "karma-babel-preprocessor": "^7.0.0",
-    "karma-coverage": "^1.1.1",
+    "karma-coverage": "^1.1.2",
     "karma-mocha": "^1.3.0",
@@ -46,11 +46,11 @@ "karma-phantomjs-launcher": "^1.0.4",
     "mkdirp": "^0.5.1",
-    "mocha": "^4.0.1",
+    "mocha": "^5.2.0",
     "phantomjs-prebuilt": "^2.1.16",
-    "rollup": "^0.52.1",
-    "rollup-plugin-commonjs": "^8.2.6",
-    "rollup-plugin-node-resolve": "^3.0.0",
-    "serve": "^6.4.4",
-    "sinon": "^4.1.3",
-    "sinon-chai": "^2.14.0",
-    "uglify-js": "^3.2.2"
+    "rollup": "^0.66.6",
+    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-node-resolve": "^3.4.0",
+    "serve": "^10.1.1",
+    "sinon": "^7.1.1",
+    "sinon-chai": "^3.2.0",
+    "uglify-js": "^3.4.9"
   },
@@ -57,0 +57,0 @@ "author": "Gianluca Guarini (http://gianlucaguarini.com/)",

README.md

@@ -39,4 +39,4 @@
 
-Once you have included the script in your page, you should wrap your parallax images in a wrapper having an `height`, `position:relative or absolute` and `overflow: hidden`
-The images will be stretched to fit always the whole wrapper size
+Once you have included the script in your page, you should wrap your parallax elements in a wrapper having an `height`, `position:relative or absolute` and `overflow: hidden`
+The elements will be stretched to fit always the whole wrapper size
 
@@ -47,2 +47,6 @@ ```html
 </figure>
+
+<figure style="position: relative; height: 300px; overflow: hidden;">
+  <video class="parallax" src="path/to/the/video.mp4" />
+</figure>
 ```
@@ -62,6 +66,6 @@
 |-------- |---------------- |---------------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Number  | `offsetYBounds` | 50              | the offset top and bottom boundaries in pixels used by the parallax to consider an image in the viewport                                                                            |
+| Number  | `offsetYBounds` | 50              | the offset top and bottom boundaries in pixels used by the parallax to consider an element in the viewport                                                                            |
 | Number  | `intensity`     | 30              | the intensity of the parallax effect                                                                                                                                                |
-| Number  | `center`        | 0.5             | the vertical center of the parallax. If you increase this value the image will be centered more on the top of the screen reducing it will look centered at bottom __this value should be between 0 and 1__ |
-| Number  | `safeHeight`    | 0.15            | the safe image height gap value in percentage that ensures it can always properly parallax. Any image should be (by default) at least 15% higher than their DOM wrappers (7.5% bottom + 7.5% top) |
+| Number  | `center`        | 0.5             | the vertical center of the parallax. If you increase this value the element will be centered more on the top of the screen reducing it will look centered at bottom __this value should be between 0 and 1__ |
+| Number  | `safeHeight`    | 0.15            | the safe element height gap value in percentage that ensures it can always properly parallax. Any element should be (by default) at least 15% higher than their DOM wrappers (7.5% bottom + 7.5% top) |
 
@@ -79,3 +83,3 @@ You can set the Parallax options in this way:
 
-Each image could be configured using custom Parallax options (except for the `offsetYBounds`) overriding the defaults:
+Each element could be configured using custom Parallax options (except for the `offsetYBounds`) overriding the defaults:
 
@@ -87,3 +91,3 @@ ```html
 <figure>
-  <img class="parallax" data-center="0.2" data-intensity="10" data-safe-height="0.2" src="path/to/the/image.jpg" />
+  <video class="parallax" data-center="0.2" data-intensity="10" data-safe-height="0.2" src="path/to/the/video.mp4" />
 </figure>
@@ -98,3 +102,3 @@ ```
 
-Initialize the parallax internal event listeners. The listeners to `image:loaded` and `images:loaded` should be set before this method gets called
+Initialize the parallax internal event listeners. The listeners to `element:loaded` and `elements:loaded` should be set before this method gets called
 
@@ -105,11 +109,11 @@ ### Parallax.on
 Currently it supports:
-  - `image:loaded`: when a parallax image gets completely loaded
-  - `images:loaded`: when all the images get loaded
-  - `draw`: when a parallax image comes in the viewport and gets moved
-  - `resize`: when the parallax images get resized
-  - `update`: when the page is scrolling and the script has updated all the visible images
+  - `element:loaded`: when a parallax elment gets completely loaded
+  - `elements:loaded`: when all the elements to parallax get loaded
+  - `draw`: when a parallax element becomes visible in the the viewport and starts getting moved
+  - `resize`: when the window will be resized
+  - `update`: when the page is scrolling and the script has updated all the visible elemens
 
 ```js
-p.on('image:loaded', function(image){
-  // do something with the image tag
+p.on('element:loaded', function(element){
+  // do something with the element
 })
@@ -123,4 +127,4 @@ ```
 ```js
-var fn = function (image) {
-    // do something with the image tag just drawn
+var fn = function (element) {
+    // do something with the elemnt just drawn
     p.off('draw', fn) // stop listening the draw event
@@ -133,3 +137,3 @@ }
 
-Refresh the position of the images visible in the viewport
+Refresh the position of the elements visible in the viewport
 
@@ -143,6 +147,6 @@ ```js
 
-Add new images to the parallax instance
+Add new element to the parallax instance
 
 ```js
-// inject new images
+// inject new elements
 p.add('.parallax-2')
@@ -153,6 +157,6 @@ ```
 
-Remove images from the parallax instance
+Remove element from the parallax instance
 
 ```js
-p.remove('.parallax-2') // remove the images from the parallax
+p.remove('.parallax-2') // remove the element from the parallax
 // and also from the DOM...
@@ -211,4 +215,4 @@ ```
 
-[codeclimate-image]:https://img.shields.io/codeclimate/github/GianlucaGuarini/parallax.svg?style=flat-square
+[codeclimate-image]:https://api.codeclimate.com/v1/badges/05d33fcf100bac2cb67f/maintainability
 [codeclimate-url]:https://codeclimate.com/github/GianlucaGuarini/parallax
 

src/Canvas.js

@@ -20,23 +20,27 @@ /**
 export default class Canvas {
-  constructor(img, opts) {
+  constructor(element, opts) {
     // make this object observable
     o(this)
     this.opts = opts
-    this.img = img
-    this.wrapper = img.parentNode
+    this.element = element
+    this.wrapper = element.parentNode
     this.isLoaded = false
 
-    // store the initial image properties - deep clone
-    this.initial = img.cloneNode(true)
+    // store the initial element properties - deep clone
+    this.initial = element.cloneNode(true)
   }
   /**
-   * Load the image
+   * Load the element
    * @returns { Object } - Canvas
    */
   load() {
+    const isImage = this.element.complete !== undefined
+    const isVideo = this.element.oncanplay !== undefined
 
-    if (!this.img.width || !this.img.height || !this.img.complete) {
-      this.img.onload = () => this.onImageLoaded()
+    if (isImage && !this.element.complete) {
+      this.element.onload = () => this.onElementLoaded()
+    } else if (isVideo && !this.element.oncanplay) {
+      this.element.onload = this.element.oncanplay = () => this.onElementLoaded()
     } else {
-      this.onImageLoaded()
+      this.onElementLoaded()
     }
@@ -48,3 +52,3 @@
   destroy() {
-    this.img.parentNode.replaceChild(this.initial, this.img)
+    this.element.parentNode.replaceChild(this.initial, this.element)
     this.off('*')
@@ -54,19 +58,19 @@ }
   /**
-   * Callback triggered when the image gets loaded
+   * Callback triggered when the element gets loaded
    * @returns { Object } - Canvas
    */
-  onImageLoaded() {
+  onElementLoaded() {
     this.isLoaded = true
     this.update()
-    this.img.style.willChange = 'transform'
-    this.trigger('loaded', this.img)
+    this.element.style.willChange = 'transform'
+    this.trigger('loaded', this.element)
     return this
   }
   /**
-   * Center the image in its wrapper
+   * Center the element in its wrapper
    * @returns { Object } - Canvas
    */
   update() {
-    const iw = this.img.naturalWidth || this.img.width,
-      ih = this.img.naturalHeight || this.img.height,
+    const iw = this.element.naturalWidth || this.element.width || this.element.offsetWidth,
+      ih = this.element.naturalHeight || this.element.height || this.element.offsetHeight,
       ratio = iw / ih,
@@ -78,3 +82,3 @@ size = this.size
     // calculate the new width and the height
-    // keeping the image ratio
+    // keeping the element ratio
     if (size.width / ratio <= size.height) {
@@ -88,3 +92,3 @@ nw = size.height * ratio
 
-    // zoom the image if necessary
+    // zoom the element if necessary
     if (nh <= size.height + size.height * this.opts.safeHeight) {
@@ -99,6 +103,6 @@ nw += nw * this.opts.safeHeight
 
-    this.img.width = nw
-    this.img.height = nh
-    this.img.style.top = `${offsetTop}px`
-    this.img.style.left = `${offsetLeft}px`
+    this.element.width = nw
+    this.element.height = nh
+    this.element.style.top = `${offsetTop}px`
+    this.element.style.left = `${offsetLeft}px`
 
@@ -108,3 +112,3 @@ return this
   /**
-   * Draw the image on the canvas
+   * Draw the element on the canvas
    * @returns { Object } - Canvas
@@ -115,11 +119,11 @@ */
       // this value will be:
-      //  < 0 when the image is on the top
-      //  0 when the image is in the center of the screen
-      //  > 0 when the image is at the bottom
+      //  < 0 when the element is on the top
+      //  0 when the element is in the center of the screen
+      //  > 0 when the element is at the bottom
       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)
+      // and the current element height
+      offset = ~~(perc * (this.element.height / size.height / 2 * this.opts.intensity) * 10)
 
-    this.img.style[TRANSFORM_PREFIX] = HAS_MATRIX ? `matrix(1,0,0,1, 0, ${-offset})` : `translate(0, ${-offset}px)`
+    this.element.style[TRANSFORM_PREFIX] = HAS_MATRIX ? `matrix(1,0,0,1, 0, ${-offset})` : `translate(0, ${-offset}px)`
 
@@ -138,3 +142,3 @@ return this
    * Get the parent wrapper offset
-   * @returns { Object } - top and left position of the image parent tag
+   * @returns { Object } - top and left position of the element parent tag
    */
@@ -149,3 +153,3 @@ get offset() {
    * Get the parent wrapper size
-   * @returns { Object } - the height and the width of the image parent tag
+   * @returns { Object } - the height and the width of the element parent tag
    */
@@ -152,0 +156,0 @@ get size() {

src/index.js

@@ -46,3 +46,2 @@ import { $, $$, extend, isUndefined, elementData } from './helpers/helpers'
   init() {
-
     if (this.bound) {
@@ -53,5 +52,5 @@ 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}"`)
+      console.warn(`No elements were found with the selector "${this.selector}"`)
     } else {
-      this.imagesLoaded = 0
+      this.elementsLoaded = 0
       this.bind()
@@ -97,3 +96,3 @@ }
   /**
-   * Callback triggered once a canvas has loaded its image
+   * Callback triggered once a canvas has loaded its element
    * @param   { Object } canvas - canvas instance
@@ -103,6 +102,6 @@ * @returns { Object } - Parallax
   onCanvasLoaded(canvas) {
-    this.trigger('image:loaded', canvas.img, canvas)
-    this.imagesLoaded++
+    this.trigger('element:loaded', canvas.element, canvas)
+    this.elementsLoaded++
     canvas.draw(stage)
-    if (this.imagesLoaded == this.canvases.length) this.trigger('images:loaded')
+    if (this.elementsLoaded == this.canvases.length) this.trigger('elements:loaded')
     return this
@@ -129,7 +128,7 @@ }
         canvas.isLoaded &&
-        scrollTop + stage.height + offsetYBounds > canvasOffset.top &&
-        canvasOffset.top + canvasHeight > scrollTop - offsetYBounds
+          scrollTop + stage.height + offsetYBounds > canvasOffset.top &&
+          canvasOffset.top + canvasHeight > scrollTop - offsetYBounds
       ) {
         canvas.draw({ height, scrollTop, width })
-        this.trigger('draw', canvas.img)
+        this.trigger('draw', canvas.element)
       }
@@ -173,3 +172,3 @@
       while (i--) {
-        if (el == this.canvases[i].img) {
+        if (el == this.canvases[i].element) {
           this.canvases[i].destroy()
@@ -213,3 +212,3 @@ this.canvases.splice(i, 1)
    * Set the canvases instances
-   * @param   { Array } els - list of the images we want to parallax
+   * @param   { Array } els - list of the elements we want to parallax
    * @returns { Array } - list of canvas instances
@@ -237,3 +236,3 @@ */
       center: 0.5,
-      // make sure that the images can always properly parallax
+      // make sure that the elements can always properly parallax
       // They should be at least 15% higher than their wrappers (7.5% bottom + 7.5% top)
@@ -240,0 +239,0 @@ safeHeight: 0.15 // 15%

src/Stage.js

@@ -7,4 +7,3 @@ /**
 
-const
-  rAF = window.requestAnimationFrame ||
+const rAF = window.requestAnimationFrame ||
     window.webkitRequestAnimationFrame ||
@@ -14,4 +13,4 @@ window.mozRequestAnimationFrame ||
     window.oRequestAnimationFrame ||
-    function (cb) { setTimeout(cb, 1000 / 60) },
-  RESIZE_DELAY = 20
+    function (cb) { setTimeout(cb, 1000 / 60) }
+const RESIZE_DELAY = 20
 
@@ -18,0 +17,0 @@ export default class Stage {

tasks/build.js

@@ -24,3 +24,3 @@ var utils = require('./_utils'),
       // from its dependencies
-      entry: './src/index.js',
+      input: './src/index.js',
       plugins: [
@@ -39,10 +39,8 @@ npm({
     }).then( function ( bundle ) {
-
-      // convert to valid es5 code with babel
-      var result = babel.transform(
-        // create a single bundle file
-        bundle.generate({
-          format: 'cjs'
-        }).code,
-        {
+      // create a single bundle file
+      return bundle.generate({
+        format: 'cjs'
+      }).then(({code}) => {
+        // convert to valid es5 code with babel
+        return babel.transform(code, {
           moduleId: global.library,
@@ -53,18 +51,18 @@ moduleIds: true,
           plugins: ['transform-es2015-modules-umd']
-        }
-      ).code
-
-      mkdirp('./dist', function() {
-        try {
-          fs.writeFileSync(`./dist/${ global.library }.js`, result, 'utf8')
-          resolve()
-        } catch (e) {
-          reject(e)
-        }
-
+        })
       })
-
-    }).catch(e =>{ utils.print(e, 'error') })
+    })
+      .then(({code}) => {
+        mkdirp('./dist', function() {
+          try {
+            fs.writeFileSync(`./dist/${ global.library }.js`, code, 'utf8')
+            resolve()
+          } catch (e) {
+            reject(e)
+          }
+        })
+      })
+      .catch(e =>{ utils.print(e, 'error') })
   })
 
 }

tasks/serve.js

 var utils = require('./_utils')
 
 module.exports = function(options) {
-
-  options = utils.extend({
-    port: 6666
-  }, options)
   // serve the contents of this folder
-  return utils.exec('./node_modules/.bin/serve', utils.optionsToArray(options))
-
+  return utils.exec('./node_modules/.bin/serve', [])
 }

tasks/test/karma.conf.js

@@ -29,3 +29,2 @@ module.exports = function(config) {
       },
-      'node_modules/mocha/mocha.js',
       'node_modules/chai/chai.js',
@@ -32,0 +31,0 @@ 'node_modules/sinon/pkg/sinon.js',

test/specs/core.specs.js

@@ -68,3 +68,3 @@ /* global Parallax */
 
-  it('The "image:loaded", "images:loaded", "draw","resize" events get called', (done) => {
+  it('The "element:loaded", "elements:loaded", "draw","resize" events get called', (done) => {
     var imagesLoaded = sinon.spy(),
@@ -76,7 +76,7 @@ resize = sinon.spy(),
 
-    p.on('image:loaded', imagesLoaded)
+    p.on('element:loaded', imagesLoaded)
     p.one('draw', draw)
     p.one('resize', resize)
 
-    p.on('images:loaded', () => {
+    p.on('elements:loaded', () => {
 
@@ -90,3 +90,2 @@ p.resize({ width: 300, height: 300 })
       done()
-
     })
@@ -93,0 +92,0 @@

No alert changes

Improved metrics

Total package byte prevSize

3011146

increased by0.06%

Lines of code

1623

increased by0.43%

Number of lines in readme file

207

increased by1.97%

No dependency changes