scroll-parallax - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

CHANGELOG.md

 ## Changelog
 
+### 1.1.0
+  * fixed: https://github.com/GianlucaGuarini/parallax/issues/4 adding the `safeHeight` option
+
 ### 1.0.4
@@ -4,0 +7,0 @@ * updated: riot-observable dependecy to get faster performances (30% faster)

dist/Parallax.js

@@ -63,5 +63,11 @@ (function (global, factory) {
 
+  function toCamel(string) {
+    return string.replace(/-(\w)/g, function (_, c) {
+      return c.toUpperCase();
+    });
+  }
+
   function elementData(el, attr) {
     if (attr) return el.dataset[attr] || el.getAttribute('data-' + attr);else return el.dataset || Array.prototype.slice.call(el.attributes).reduce(function (ret, attribute) {
-      if (/data-/.test(attribute.name)) ret[attribute.name] = attribute.value;
+      if (/data-/.test(attribute.name)) ret[toCamel(attribute.name)] = attribute.value;
       return ret;
@@ -336,15 +342,29 @@ }, {});
             ratio = iw / ih,
-            size = this.size;
+            size = this.size,
+            nh,
+            nw,
+            offsetTop,
+            offsetLeft;
 
         if (size.width / ratio <= size.height) {
-          this.img.height = size.height;
-          this.img.width = size.height * ratio;
+          nw = size.height * ratio;
+          nh = size.height;
         } else {
-          this.img.width = size.width;
-          this.img.height = size.width / ratio;
+          nw = size.width;
+          nh = size.width / ratio;
         }
 
-        this.img.style.top = - ~ ~((this.img.height - size.height) / 2) + 'px';
-        this.img.style.left = - ~ ~((this.img.width - size.width) / 2) + 'px';
+        if (nh <= size.height + size.height * this.opts.safeHeight) {
+          nw += nw * this.opts.safeHeight;
+          nh += nh * this.opts.safeHeight;
+        }
 
+        offsetTop = - ~ ~((nh - size.height) / 2);
+        offsetLeft = - ~ ~((nw - size.width) / 2);
+
+        this.img.width = nw;
+        this.img.height = nh;
+        this.img.style.top = offsetTop + 'px';
+        this.img.style.left = offsetLeft + 'px';
+
         return this;
@@ -546,3 +566,4 @@ }
             intensity: !isUndefined(data.intensity) ? +data.intensity : _this7.opts.intensity,
-            center: !isUndefined(data.center) ? +data.center : _this7.opts.center
+            center: !isUndefined(data.center) ? +data.center : _this7.opts.center,
+            safeHeight: !isUndefined(data.safeHeight) ? +data.safeHeight : _this7.opts.safeHeight
           });
@@ -557,4 +578,5 @@ });
           intensity: 30,
-          center: 0.5
-        };
+          center: 0.5,
+
+          safeHeight: 0.15 };
         extend(this._defaults, opts);
@@ -561,0 +583,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,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,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[e.name]=e.value),t},{})}function o(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 a,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){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},c=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(t){setTimeout(t,1e3/60)},l=20,f=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)},l),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}(),d=function(t){return o(t.style,"transform","translate3d(0, 0, 0)"),/translate3d/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;return n.width/i<=n.height?(this.img.height=n.height,this.img.width=n.height*i):(this.img.width=n.width,this.img.height=n.width/i),this.img.style.top=-~~((this.img.height-n.height)/2)+"px",this.img.style.left=-~~((this.img.width-n.width)/2)+"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,d?o(this.img.style,"transform","translate3d(0, "+-i+"%, 0)"):o(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),h(this),this.opts=n,this.selector=i,this.canvases=[],this.add(i),a||(a=new f),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;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)},a.on("resize",this._onResize),a.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(a.size).onScroll(a.scrollTop),this}},{key:"onCanvasLoaded",value:function(t){return this.trigger("image:loaded",t.img,t),this.imagesLoaded++,t.draw(a),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=a.scrollTop;e--;){var r=this.canvases[e],s=r.size.height,o=r.offset,u=o.top+s-n;r.isLoaded&&u+i>0&&u-i<n+a.height&&(r.draw(a),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=[],a.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(a)}return this.trigger("resize"),this}},{key:"createCanvases",value:function(t){var e=this;return t.map(function(t){var i=s(t);return new g(t,{intensity:r(i.intensity)?e.opts.intensity:+i.intensity,center:r(i.center)?e.opts.center:+i.center})})}},{key:"opts",set:function(t){this._defaults={offsetYBounds:50,intensity:30,center:.5},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,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});

package.json

 {
   "name": "scroll-parallax",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "ES6/ES2015 unobstrusive modern HW accelerated scrollable images parallax",
   "main": "index.js",
+  "jsnext:main": "src/index.js",
   "scripts": {
@@ -56,5 +57,5 @@ "test": "node make test",
   "bugs": {
-    "url": "https://github.com/Goldinteractive/parallax/issues"
+    "url": "https://github.com/GianlucaGuarini/parallax/issues"
   },
-  "homepage": "https://github.com/Goldinteractive/parallax",
+  "homepage": "https://github.com/GianlucaGuarini/parallax",
   "dependencies": {
@@ -61,0 +62,0 @@ "riot-observable": "^2.4.2"

README.md

@@ -56,9 +56,10 @@
 
-The options available are only 3 at moment:
+The options available are only 4 at moment:
 
 | Type    | Name            | Default Value   | Description                                                                                                                                                                         |
-|-------- |---------------  |---------  |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Number  | `offsetYBounds`   | 50        | the offset top and bottom boundaries in pixels used by the parallax to consider an image 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  |
+|-------- |---------------- |---------------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Number  | `offsetYBounds` | 50              | the offset top and bottom boundaries in pixels used by the parallax to consider an image 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) |
 
@@ -71,7 +72,8 @@ You can set the Parallax options in this way:
   intensity: 30,
-  center: 0.5
+  center: 0.5,
+  safeHeight: 0.15
 }).init()
 ```
 
-Each image could be configured using custom Parallax options (except the `offsetYBounds`) overriding the default:
+Each image could be configured using custom Parallax options (except for the `offsetYBounds`) overriding the defaults:
 
@@ -83,3 +85,3 @@ ```html
 <figure>
-  <img class="parallax" data-center="0.2" data-intensity="10" src="path/to/the/image.jpg" />
+  <img class="parallax" data-center="0.2" data-intensity="10" data-safe-height="0.2" src="path/to/the/image.jpg" />
 </figure>
@@ -86,0 +88,0 @@ ```

src/Canvas.js

@@ -56,15 +56,33 @@ /**
       ratio = iw / ih,
-      size = this.size
+      size = this.size,
+      nh,
+      nw,
+      offsetTop,
+      offsetLeft
 
+    // calculate the new width and the height
+    // keeping the image ratio
     if (size.width / ratio <= size.height) {
-      this.img.height = size.height
-      this.img.width = size.height * ratio
+      nw = size.height * ratio
+      nh = size.height
     } else {
-      this.img.width = size.width
-      this.img.height = size.width / ratio
+      nw = size.width
+      nh = size.width / ratio
     }
 
-    this.img.style.top = `${-~~((this.img.height - size.height) / 2)}px`
-    this.img.style.left = `${-~~((this.img.width - size.width) / 2)}px`
+    // zoom the image if necessary
+    if (nh <= size.height + size.height * this.opts.safeHeight) {
+      nw += nw * this.opts.safeHeight
+      nh += nh * this.opts.safeHeight
+    }
 
+    // calculate the offset top/left rounding it
+    offsetTop = -~~((nh - size.height) / 2)
+    offsetLeft = -~~((nw - size.width) / 2)
+
+    this.img.width = nw
+    this.img.height = nh
+    this.img.style.top = `${offsetTop}px`
+    this.img.style.left = `${offsetLeft}px`
+
     return this
@@ -71,0 +89,0 @@ }

src/helpers/helpers.js

@@ -59,3 +59,15 @@ /**
 }
+
 /**
+ * Convert a string containing dashes to camel case
+ * @param   { String } string - input string
+ * @returns { String } my-string -> myString
+ */
+export function toCamel(string) {
+  return string.replace(/-(\w)/g, function(_, c) {
+    return c.toUpperCase()
+  })
+}
+
+/**
  * Get the data-* of any DOM element
@@ -72,3 +84,3 @@ * @param   { Object } el - DOM element we want to parse
       if (/data-/.test(attribute.name))
-        ret[attribute.name] = attribute.value
+        ret[toCamel(attribute.name)] = attribute.value
       return ret
@@ -75,0 +87,0 @@ }, {})

src/index.js

@@ -182,3 +182,4 @@ import { $, $$, extend, isUndefined, elementData } from './helpers/helpers'
         intensity: !isUndefined(data.intensity) ? +data.intensity : this.opts.intensity,
-        center: !isUndefined(data.center) ? +data.center : this.opts.center
+        center: !isUndefined(data.center) ? +data.center : this.opts.center,
+        safeHeight: !isUndefined(data.safeHeight) ? +data.safeHeight : this.opts.safeHeight
       })
@@ -195,3 +196,6 @@ })
       intensity: 30,
-      center: 0.5
+      center: 0.5,
+      // make sure that the images can always properly parallax
+      // They should be at least 15% higher than their wrappers (7.5% bottom + 7.5% top)
+      safeHeight: 0.15 // 15%
     }
@@ -198,0 +202,0 @@ extend(this._defaults, opts)

tasks/build.js

@@ -55,4 +55,10 @@ var utils = require('./_utils'),
       mkdirp('./dist', function() {
-        fs.writeFileSync(`./dist/${ global.library }.js`, result, 'utf8')
-        resolve()
+        try {
+          fs.writeFileSync(`./dist/${ global.library }.js`, result, 'utf8')
+          resolve()
+        } catch (e) {
+          utils.print(e, 'error')
+          reject()
+        }
+
       })
@@ -59,0 +65,0 @@

No alert changes

Improved metrics

Lines of code

1569

increased by3.5%

Number of lines in readme file

203

increased by1%

Worsened metrics

Total package byte prevSize

3006932

decreased by-9.07%

No dependency changes