scroll-parallax - npm Package Compare versions

Comparing version 1.0.0-beta to 1.0.0-beta.2

dist/Parallax.js

@@ -750,2 +750,11 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
+	/**
+	 * Check the translate3d feature
+	 */
+	var HAS_TRANSLATE_3D = (function (div) {
+	  (0, _helpersHelpers.prefix)(div.style, 'transform', 'translate3d(0, 0, 0)');
+	  return (/translate3d/g.test(div.style.cssText)
+	  );
+	})(document.createElement('div'));
+
 	var Canvas = (function () {
@@ -834,4 +843,5 @@ function Canvas(img, opts) {
 	      perc *= this.img.height / size.height / 2 * this.opts.intensity;
-	      (0, _helpersHelpers.prefix)(this.img.style, 'transform', 'translate(0, ' + -perc + '%)');
 
+	      if (HAS_TRANSLATE_3D) (0, _helpersHelpers.prefix)(this.img.style, 'transform', 'translate3d(0, ' + -perc + '%, 0)');else (0, _helpersHelpers.prefix)(this.img.style, 'transform', 'translate(0, ' + -perc + '%)');
+
 	      return this;
@@ -838,0 +848,0 @@ }

dist/Parallax.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Parallax=e():t.Parallax=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return t[i].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var o,s=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),a=n(1),u=n(2),c=i(u),h=n(4),f=i(h),l=n(3),d=i(l),g=function(){function t(e){var n=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];return r(this,t),d["default"](this),this.opts=n,this.canvases=[],this.add(e),this.canvases.length?(o||(o=new c["default"]),this):console.warn('No images were found with the selector "'+e+'"')}return s(t,[{key:"init",value:function(){return this.imagesLoaded=0,this.bind(),this}},{key:"bind",value:function(){var t=this;return this._onResize=function(){for(var e=arguments.length,n=Array(e),i=0;e>i;i++)n[i]=arguments[i];return t.resize.apply(t,n)},this._onScroll=function(){for(var e=arguments.length,n=Array(e),i=0;e>i;i++)n[i]=arguments[i];return t.scroll.apply(t,n)},o.on("resize",this._onResize),o.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(o.size).onScroll(o.scrollTop),this}},{key:"onCanvasLoaded",value:function(t){return this.trigger("image:loaded",t.img,t),this.imagesLoaded++,t.draw(o),this.imagesLoaded==this.canvases.length&&this.trigger("images:loaded"),this}},{key:"scroll",value:function(t){for(var e=this.canvases.length;e--;){var n=this.canvases[e],i=o.scrollTop,r=n.size.height,s=this.opts.offsetYBounds,a=n.offset,u=a.top+r-i;n.isLoaded&&u+s>0&&u-s<i+o.height&&(n.draw(o),this.trigger("draw",n.img))}return this}},{key:"add",value:function(t){return this.canvases=this.canvases.concat(this.createCanvases(a.$$(t))),this}},{key:"remove",value:function(t){var e=this;return a.$$(t).forEach(function(t){for(var n=e.canvases.length;n--;)if(t==e.canvases[n].img){e.canvases.splice(n,1);break}}),this}},{key:"destroy",value:function(){return this.off("*"),o.off("resize",this._onResize).off("scroll",this._onScroll),this}},{key:"resize",value:function(t){for(var e=this.canvases.length;e--;){var n=this.canvases[e];if(!n.isLoaded)return;n.update().draw(o)}return this.trigger("resize"),this}},{key:"createCanvases",value:function(t){var e=this;return t.map(function(t){var n=a.elementData(t);return new f["default"](t,{intensity:a.isUndefined(n.intensity)?e.opts.intensity:+n.intensity,center:a.isUndefined(n.center)?e.opts.center:+n.center})})}},{key:"opts",set:function(t){this._defaults={offsetYBounds:50,intensity:30,center:.5},a.extend(this._defaults,t)},get:function(){return this._defaults}}]),t}();e["default"]=g,t.exports=e["default"]},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={$$:function(t,e){var n;return n="string"==typeof t?(e||document).querySelectorAll(t):t,Array.prototype.slice.call(n)},$:function(t,e){return(e||document).querySelector(t)},extend:function(t){for(var e,n=arguments,i=1;i<n.length;++i)if(e=n[i])for(var r in e)t[r]=e[r];return t},isUndefined:function(t){return"undefined"==typeof t},elementData:function(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},{})},prefix:function n(t,e,i){for(var r=["ms","o","Moz","webkit",""],o=r.length;o--;){var n=r[o],s=n?n+e[0].toUpperCase()+e.substr(1):e.toLowerCase()+e.substr(1);if(s in t)return t[s]=i,!0}return!1}},t.exports=e["default"]},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var o=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),s=n(3),a=i(s),u=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(t){setTimeout(t,1e3/60)},c=20,h=function(){function t(){r(this,t),a["default"](this),this.resizeTimer=null,this.tick=!1,this.bind()}return o(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,u(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)},c),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}();e["default"]=h,t.exports=e["default"]},function(t,e,n){!function(e,n){var i=function(t){t=t||{};var e={},n=function(t,e){t.replace(/\S+/g,e)};return t.on=function(i,r){return"function"!=typeof r?t:(n(i,function(t,n){(e[t]=e[t]||[]).push(r),r.typed=n>0}),t)},t.off=function(i,r){return"*"==i?e={}:n(i,function(t){if(r)for(var n,i=e[t],o=0;n=i&&i[o];++o)n==r&&i.splice(o--,1);else delete e[t]}),t},t.one=function(e,n){function i(){t.off(e,i),n.apply(t,arguments)}return t.on(e,i)},t.trigger=function(i){var r=[].slice.call(arguments,1);return n(i,function(n){for(var i,o=(e[n]||[]).slice(0),s=0;i=o[s];++s){if(i.busy)return;i.busy=1;try{i.apply(t,i.typed?[n].concat(r):r)}catch(a){}o[s]!==i&&s--,i.busy=0}e.all&&"all"!=n&&t.trigger.apply(t,["all",n].concat(r))}),t},t};t.exports=i}("undefined"!=typeof window?window:void 0)},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var o=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),s=n(1),a=n(3),u=i(a),c=function(){function t(e,n){r(this,t),u["default"](this),this.opts=n,this.img=e,this.wrapper=e.parentNode,this.isLoaded=!1}return o(t,[{key:"load",value:function(){return this.img.width&&this.img.width&&this.img.complete?this.onImageLoaded():this.img.onload=this.onImageLoaded.bind(this),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,n=t/e,i=this.size;return i.width/n<=i.height?(this.img.height=i.height,this.img.width=i.height*n):(this.img.width=i.width,this.img.height=i.width/n),this.img.style.top=-~~((this.img.height-i.height)/2)+"px",this.img.style.left=-~~((this.img.width-i.width)/2)+"px",this}},{key:"draw",value:function(t){var e=this.size,n=(this.offset.top+e.height*this.opts.center+t.height/2-t.scrollTop)/t.height-1;return n*=this.img.height/e.height/2*this.opts.intensity,s.prefix(this.img.style,"transform","translate(0, "+-n+"%)"),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}();e["default"]=c,t.exports=e["default"]}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Parallax=e():t.Parallax=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return t[i].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var s,o=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),a=n(1),u=n(2),c=i(u),f=n(4),h=i(f),l=n(3),d=i(l),g=function(){function t(e){var n=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];return r(this,t),d["default"](this),this.opts=n,this.canvases=[],this.add(e),this.canvases.length?(s||(s=new c["default"]),this):console.warn('No images were found with the selector "'+e+'"')}return o(t,[{key:"init",value:function(){return this.imagesLoaded=0,this.bind(),this}},{key:"bind",value:function(){var t=this;return this._onResize=function(){for(var e=arguments.length,n=Array(e),i=0;e>i;i++)n[i]=arguments[i];return t.resize.apply(t,n)},this._onScroll=function(){for(var e=arguments.length,n=Array(e),i=0;e>i;i++)n[i]=arguments[i];return t.scroll.apply(t,n)},s.on("resize",this._onResize),s.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(s.size).onScroll(s.scrollTop),this}},{key:"onCanvasLoaded",value:function(t){return this.trigger("image:loaded",t.img,t),this.imagesLoaded++,t.draw(s),this.imagesLoaded==this.canvases.length&&this.trigger("images:loaded"),this}},{key:"scroll",value:function(t){for(var e=this.canvases.length;e--;){var n=this.canvases[e],i=s.scrollTop,r=n.size.height,o=this.opts.offsetYBounds,a=n.offset,u=a.top+r-i;n.isLoaded&&u+o>0&&u-o<i+s.height&&(n.draw(s),this.trigger("draw",n.img))}return this}},{key:"add",value:function(t){return this.canvases=this.canvases.concat(this.createCanvases(a.$$(t))),this}},{key:"remove",value:function(t){var e=this;return a.$$(t).forEach(function(t){for(var n=e.canvases.length;n--;)if(t==e.canvases[n].img){e.canvases.splice(n,1);break}}),this}},{key:"destroy",value:function(){return this.off("*"),s.off("resize",this._onResize).off("scroll",this._onScroll),this}},{key:"resize",value:function(t){for(var e=this.canvases.length;e--;){var n=this.canvases[e];if(!n.isLoaded)return;n.update().draw(s)}return this.trigger("resize"),this}},{key:"createCanvases",value:function(t){var e=this;return t.map(function(t){var n=a.elementData(t);return new h["default"](t,{intensity:a.isUndefined(n.intensity)?e.opts.intensity:+n.intensity,center:a.isUndefined(n.center)?e.opts.center:+n.center})})}},{key:"opts",set:function(t){this._defaults={offsetYBounds:50,intensity:30,center:.5},a.extend(this._defaults,t)},get:function(){return this._defaults}}]),t}();e["default"]=g,t.exports=e["default"]},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={$$:function(t,e){var n;return n="string"==typeof t?(e||document).querySelectorAll(t):t,Array.prototype.slice.call(n)},$:function(t,e){return(e||document).querySelector(t)},extend:function(t){for(var e,n=arguments,i=1;i<n.length;++i)if(e=n[i])for(var r in e)t[r]=e[r];return t},isUndefined:function(t){return"undefined"==typeof t},elementData:function(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},{})},prefix:function n(t,e,i){for(var r=["ms","o","Moz","webkit",""],s=r.length;s--;){var n=r[s],o=n?n+e[0].toUpperCase()+e.substr(1):e.toLowerCase()+e.substr(1);if(o in t)return t[o]=i,!0}return!1}},t.exports=e["default"]},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var s=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),o=n(3),a=i(o),u=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(t){setTimeout(t,1e3/60)},c=20,f=function(){function t(){r(this,t),a["default"](this),this.resizeTimer=null,this.tick=!1,this.bind()}return s(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,u(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)},c),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}();e["default"]=f,t.exports=e["default"]},function(t,e,n){!function(e,n){var i=function(t){t=t||{};var e={},n=function(t,e){t.replace(/\S+/g,e)};return t.on=function(i,r){return"function"!=typeof r?t:(n(i,function(t,n){(e[t]=e[t]||[]).push(r),r.typed=n>0}),t)},t.off=function(i,r){return"*"==i?e={}:n(i,function(t){if(r)for(var n,i=e[t],s=0;n=i&&i[s];++s)n==r&&i.splice(s--,1);else delete e[t]}),t},t.one=function(e,n){function i(){t.off(e,i),n.apply(t,arguments)}return t.on(e,i)},t.trigger=function(i){var r=[].slice.call(arguments,1);return n(i,function(n){for(var i,s=(e[n]||[]).slice(0),o=0;i=s[o];++o){if(i.busy)return;i.busy=1;try{i.apply(t,i.typed?[n].concat(r):r)}catch(a){}s[o]!==i&&o--,i.busy=0}e.all&&"all"!=n&&t.trigger.apply(t,["all",n].concat(r))}),t},t};t.exports=i}("undefined"!=typeof window?window:void 0)},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var s=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),o=n(1),a=n(3),u=i(a),c=function(t){return o.prefix(t.style,"transform","translate3d(0, 0, 0)"),/translate3d/g.test(t.style.cssText)}(document.createElement("div")),f=function(){function t(e,n){r(this,t),u["default"](this),this.opts=n,this.img=e,this.wrapper=e.parentNode,this.isLoaded=!1}return s(t,[{key:"load",value:function(){return this.img.width&&this.img.width&&this.img.complete?this.onImageLoaded():this.img.onload=this.onImageLoaded.bind(this),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,n=t/e,i=this.size;return i.width/n<=i.height?(this.img.height=i.height,this.img.width=i.height*n):(this.img.width=i.width,this.img.height=i.width/n),this.img.style.top=-~~((this.img.height-i.height)/2)+"px",this.img.style.left=-~~((this.img.width-i.width)/2)+"px",this}},{key:"draw",value:function(t){var e=this.size,n=(this.offset.top+e.height*this.opts.center+t.height/2-t.scrollTop)/t.height-1;return n*=this.img.height/e.height/2*this.opts.intensity,c?o.prefix(this.img.style,"transform","translate3d(0, "+-n+"%, 0)"):o.prefix(this.img.style,"transform","translate(0, "+-n+"%)"),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}();e["default"]=f,t.exports=e["default"]}])});

package.json

 {
   "name": "scroll-parallax",
-  "version": "1.0.0-beta",
+  "version": "1.0.0-beta.2",
   "description": " HW accelerated scrollable images parallax using HTML5 canvas — Edit ",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -66,3 +66,2 @@ # Why
 })
-p.init()
 ```
@@ -80,3 +79,2 @@
 p.on('draw', fn)
-p.init()
 ```
@@ -83,0 +81,0 @@

src/Canvas.js

@@ -8,2 +8,10 @@ /**
 
+/**
+ * Check the translate3d feature
+ */
+const HAS_TRANSLATE_3D = (function(div) {
+  prefix(div.style, 'transform', 'translate3d(0, 0, 0)')
+  return /translate3d/g.test(div.style.cssText)
+})(document.createElement('div'))
+
 export default class Canvas {
@@ -78,4 +86,8 @@ constructor(img, opts) {
     perc *= this.img.height / size.height / 2 * this.opts.intensity
-    prefix(this.img.style, 'transform', `translate(0, ${-perc}%)`)
 
+    if (HAS_TRANSLATE_3D)
+      prefix(this.img.style, 'transform', `translate3d(0, ${-perc}%, 0)`)
+    else
+      prefix(this.img.style, 'transform', `translate(0, ${-perc}%)`)
+
     return this
@@ -82,0 +94,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3312218

increased by0.03%

Lines of code

1662

increased by1.09%

Worsened metrics

Number of lines in readme file

144

decreased by-1.37%

No dependency changes