simple-parallax-js
Advanced tools
Comparing version 5.1.0 to 5.2.0
@@ -19,6 +19,4 @@ module.exports = { | ||
| 'max-len': ['error', { code: 150 }], | ||
| 'no-prototype-builtins': 0, | ||
| 'import/no-cycle': 0, | ||
| 'comma-dangle': ['error', 'never'] | ||
| 'no-prototype-builtins': 0 | ||
| } | ||
| }; |
| /*! | ||
| * simpleParallax - simpleParallax is a simple JavaScript library that gives your website parallax animations on any images, | ||
| * @date: 13-06-2019 16:24:29, | ||
| * @version: 5.1.0, | ||
| * @date: 07-12-2019 18:53:52, | ||
| * @version: 5.2.0, | ||
| * @link: https://simpleparallax.com/ | ||
@@ -132,4 +132,5 @@ */ | ||
| key: "setViewportTop", | ||
| value: function setViewportTop() { | ||
| this.positions.top = window.pageYOffset; | ||
| value: function setViewportTop(container) { | ||
| // if this is a custom container, user the scrollTop | ||
| this.positions.top = container ? container.scrollTop : window.pageYOffset; | ||
| return this.positions; | ||
@@ -144,13 +145,9 @@ } | ||
| }, { | ||
| key: "setViewportHeight", | ||
| value: function setViewportHeight() { | ||
| this.positions.height = document.documentElement.clientHeight; | ||
| return this.positions; | ||
| } | ||
| }, { | ||
| key: "setViewportAll", | ||
| value: function setViewportAll() { | ||
| this.positions.top = window.pageYOffset; | ||
| value: function setViewportAll(container) { | ||
| // if this is a custom container, user the scrollTop | ||
| this.positions.top = container ? container.scrollTop : window.pageYOffset; // if this is a custom container, get the height from the custom container itself | ||
| this.positions.height = container ? container.clientHeight : document.documentElement.clientHeight; | ||
| this.positions.bottom = this.positions.top + this.positions.height; | ||
| this.positions.height = document.documentElement.clientHeight; | ||
| return this.positions; | ||
@@ -163,3 +160,4 @@ } | ||
| /* harmony default export */ var viewport = (Viewport); | ||
| var viewport = new Viewport(); | ||
| // CONCATENATED MODULE: ./src/helpers/convertToArray.js | ||
@@ -257,2 +255,4 @@ // check wether the element is a Node List, a HTML Collection or an array | ||
| value: function init() { | ||
| var _this = this; | ||
| // for some reason, <picture> are init an infinite time on windows OS | ||
@@ -267,6 +267,6 @@ if (this.isInit) return; // check if element has not been already initialized with simpleParallax | ||
| this.wrapElement(this.element); | ||
| } // apply the default style on the image | ||
| } // apply the transform style on the image | ||
| this.setStyle(); // get the current element offset | ||
| this.setTransformCSS(); // get the current element offset | ||
@@ -279,4 +279,13 @@ this.getElementOffset(); // init the Intesection Observer | ||
| this.animate(); // for some reason, <picture> are init an infinite time on windows OS | ||
| this.animate(); // if a delay has been set | ||
| if (this.settings.delay > 0) { | ||
| // apply a timeout to avoid buggy effect | ||
| setTimeout(function () { | ||
| // apply the transition style on the image | ||
| _this.setTransitionCSS(); | ||
| }, 10); | ||
| } // for some reason, <picture> are init an infinite time on windows OS | ||
| this.isInit = true; | ||
@@ -309,4 +318,4 @@ } // if overflow option is set to false | ||
| }, { | ||
| key: "setStyle", | ||
| value: function setStyle() { | ||
| key: "setTransformCSS", | ||
| value: function setTransformCSS() { | ||
| if (this.settings.overflow === false) { | ||
@@ -316,8 +325,2 @@ // if overflow option is set to false | ||
| this.element.style[helpers_cssTransform] = "scale(".concat(this.settings.scale, ")"); | ||
| } | ||
| if (this.settings.delay > 0) { | ||
| // if delay option is set to true | ||
| // add transition option | ||
| this.element.style.transition = "transform ".concat(this.settings.delay, "s ").concat(this.settings.transition); | ||
| } // add will-change CSS property to improve perfomance | ||
@@ -327,2 +330,9 @@ | ||
| this.element.style.willChange = 'transform'; | ||
| } // apply the transition effet | ||
| }, { | ||
| key: "setTransitionCSS", | ||
| value: function setTransitionCSS() { | ||
| // add transition option | ||
| this.element.style.transition = "transform ".concat(this.settings.delay, "s ").concat(this.settings.transition); | ||
| } // remove style of the element | ||
@@ -347,4 +357,11 @@ | ||
| this.elementTop = positions.top + simpleParallax_viewport.positions.top; // get offset bottom | ||
| this.elementTop = positions.top + viewport.positions.top; // if there is a custom container | ||
| if (this.settings.customContainer) { | ||
| // we need to do some calculation to get the position from the parent rather than the viewport | ||
| var parentPositions = this.settings.customContainer.getBoundingClientRect(); | ||
| this.elementTop = positions.top - parentPositions.top + viewport.positions.top; | ||
| } // get offset bottom | ||
| this.elementBottom = this.elementHeight + this.elementTop; | ||
@@ -393,3 +410,3 @@ } // build the Threshold array to cater change for every pixel scrolled | ||
| value: function checkIfVisible() { | ||
| return this.elementBottom > simpleParallax_viewport.positions.top && this.elementTop < simpleParallax_viewport.positions.bottom; | ||
| return this.elementBottom > viewport.positions.top && this.elementTop < viewport.positions.bottom; | ||
| } // calculate the range between image will be translated | ||
@@ -411,3 +428,3 @@ | ||
| // rounding percentage to a 1 number float to avoid unn unnecessary calculation | ||
| var percentage = ((simpleParallax_viewport.positions.bottom - this.elementTop) / ((simpleParallax_viewport.positions.height + this.elementHeight) / 100)).toFixed(1); // sometime the percentage exceeds 100 or goes below 0 | ||
| var percentage = ((viewport.positions.bottom - this.elementTop) / ((viewport.positions.height + this.elementHeight) / 100)).toFixed(1); // sometime the percentage exceeds 100 or goes below 0 | ||
@@ -479,3 +496,2 @@ percentage = Math.min(100, Math.max(0, percentage)); // sometime the same percentage is returned | ||
| // CONCATENATED MODULE: ./src/simpleParallax.js | ||
| /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "viewport", function() { return simpleParallax_viewport; }); | ||
| /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return simpleParallax_SimpleParallax; }); | ||
@@ -491,3 +507,2 @@ function simpleParallax_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| var simpleParallax_viewport = new viewport(); | ||
| var intersectionObserverAvailable = true; | ||
@@ -514,12 +529,13 @@ var isInit = false; | ||
| transition: 'cubic-bezier(0,0,0,1)', | ||
| breakpoint: false | ||
| customContainer: false | ||
| }; | ||
| this.settings = Object.assign(this.defaults, options); // check if breakpoint is set and superior to user browser width | ||
| this.settings = Object.assign(this.defaults, options); // check if the browser handle the Intersection Observer API | ||
| if (this.settings.breakpoint && document.documentElement.clientWidth <= this.settings.breakpoint) { | ||
| return; | ||
| } // check if the browser handle the Intersection Observer API | ||
| if (!('IntersectionObserver' in window)) intersectionObserverAvailable = false; | ||
| if (this.settings.customContainer) { | ||
| console.log(helpers_convertToArray(this.settings.customContainer)[0]); | ||
| this.customContainer = helpers_convertToArray(this.settings.customContainer)[0]; | ||
| } | ||
| if (!('IntersectionObserver' in window)) intersectionObserverAvailable = false; | ||
| this.lastPosition = -1; | ||
@@ -535,3 +551,3 @@ this.resizeIsDone = this.resizeIsDone.bind(this); | ||
| value: function init() { | ||
| simpleParallax_viewport.setViewportAll(); | ||
| viewport.setViewportAll(this.customContainer); | ||
@@ -565,8 +581,4 @@ for (var i = this.elements.length - 1; i >= 0; i--) { | ||
| // re-get all the viewport positions | ||
| simpleParallax_viewport.setViewportAll(); | ||
| viewport.setViewportAll(this.customContainer); | ||
| if (this.settings.breakpoint && document.documentElement.clientWidth <= this.settings.breakpoint) { | ||
| this.destroy(); | ||
| } | ||
| for (var i = instancesLength - 1; i >= 0; i--) { | ||
@@ -587,5 +599,5 @@ // re-get the current element offset | ||
| // get the offset top of the viewport | ||
| simpleParallax_viewport.setViewportTop(); | ||
| viewport.setViewportTop(this.customContainer); | ||
| if (this.lastPosition === simpleParallax_viewport.positions.top) { | ||
| if (this.lastPosition === viewport.positions.top) { | ||
| // if last position if the same than the curent one | ||
@@ -598,3 +610,3 @@ // callback the animationFrame and exit the current loop | ||
| simpleParallax_viewport.setViewportBottom(); // proceed with the current element | ||
| viewport.setViewportBottom(); // proceed with the current element | ||
@@ -608,3 +620,3 @@ for (var i = instancesLength - 1; i >= 0; i--) { | ||
| this.lastPosition = simpleParallax_viewport.positions.top; | ||
| this.lastPosition = viewport.positions.top; | ||
| } // proceed the element | ||
@@ -616,5 +628,6 @@ | ||
| var isVisible = false; // is not support for Intersection Observer API | ||
| // or if this is a custom container | ||
| // use old function to check if element visible | ||
| if (!intersectionObserverAvailable) { | ||
| if (!intersectionObserverAvailable || this.customContainer) { | ||
| isVisible = instance.checkIfVisible(); // if support | ||
@@ -647,5 +660,6 @@ // use response from Intersection Observer API Callback | ||
| instancesToDestroy.push(instance); | ||
| } else { | ||
| return instance; | ||
| return false; | ||
| } | ||
| return instance; | ||
| }); | ||
@@ -652,0 +666,0 @@ |
| /*! | ||
| * simpleParallax.min - simpleParallax is a simple JavaScript library that gives your website parallax animations on any images, | ||
| * @date: 13-06-2019 16:24:29, | ||
| * @version: 5.1.0, | ||
| * @date: 07-12-2019 18:53:52, | ||
| * @version: 5.2.0, | ||
| * @link: https://simpleparallax.com/ | ||
| */ | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("simpleParallax",[],e):"object"==typeof exports?exports.simpleParallax=e():t.simpleParallax=e()}(window,function(){return(n={},s.m=i=[function(t,e,i){"use strict";function n(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)}}i.r(e);var s=function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.positions={top:0,bottom:0,height:0}}return function(t,e,i){e&&n(t.prototype,e),i&&n(t,i)}(t,[{key:"setViewportTop",value:function(){return this.positions.top=window.pageYOffset,this.positions}},{key:"setViewportBottom",value:function(){return this.positions.bottom=this.positions.top+this.positions.height,this.positions}},{key:"setViewportHeight",value:function(){return this.positions.height=document.documentElement.clientHeight,this.positions}},{key:"setViewportAll",value:function(){return this.positions.top=window.pageYOffset,this.positions.bottom=this.positions.top+this.positions.height,this.positions.height=document.documentElement.clientHeight,this.positions}}]),t}(),o=function(t){return NodeList.prototype.isPrototypeOf(t)||HTMLCollection.prototype.isPrototypeOf(t)?Array.from(t):"string"==typeof t||t instanceof String?document.querySelectorAll(t):[t]},r=function(){for(var t,e="transform webkitTransform mozTransform oTransform msTransform".split(" "),i=0;void 0===t;)t=void 0!==document.createElement("div").style[e[i]]?e[i]:void 0,i+=1;return t}(),a=function(t){return!!t&&(!!t.complete&&(void 0===t.naturalWidth||0!==t.naturalWidth))};function l(t){return function(t){if(Array.isArray(t)){for(var e=0,i=new Array(t.length);e<t.length;e++)i[e]=t[e];return i}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function u(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)}}var h=function(){function i(t,e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i),this.element=t,this.elementContainer=t,this.settings=e,this.isVisible=!0,this.isInit=!1,this.oldTranslateValue=-1,this.init=this.init.bind(this),a(t)?this.init():this.element.addEventListener("load",this.init)}return function(t,e,i){e&&u(t.prototype,e),i&&u(t,i)}(i,[{key:"init",value:function(){this.isInit||this.element.closest(".simpleParallax")||(!1===this.settings.overflow&&this.wrapElement(this.element),this.setStyle(),this.getElementOffset(),this.intersectionObserver(),this.getTranslateValue(),this.animate(),this.isInit=!0)}},{key:"wrapElement",value:function(){var t=this.element.closest("picture")||this.element,e=document.createElement("div");e.classList.add("simpleParallax"),e.style.overflow="hidden",t.parentNode.insertBefore(e,t),e.appendChild(t),this.elementContainer=e}},{key:"unWrapElement",value:function(){var t=this.elementContainer;t.replaceWith.apply(t,l(t.childNodes))}},{key:"setStyle",value:function(){!1===this.settings.overflow&&(this.element.style[r]="scale(".concat(this.settings.scale,")")),0<this.settings.delay&&(this.element.style.transition="transform ".concat(this.settings.delay,"s ").concat(this.settings.transition)),this.element.style.willChange="transform"}},{key:"unSetStyle",value:function(){this.element.style.willChange="",this.element.style[r]="",this.element.style.transition=""}},{key:"getElementOffset",value:function(){var t=this.elementContainer.getBoundingClientRect();this.elementHeight=t.height,this.elementTop=t.top+d.positions.top,this.elementBottom=this.elementHeight+this.elementTop}},{key:"buildThresholdList",value:function(){for(var t=[],e=1;e<=this.elementHeight;e++){var i=e/this.elementHeight;t.push(i)}return t}},{key:"intersectionObserver",value:function(){var t={root:null,threshold:this.buildThresholdList()};this.observer=new IntersectionObserver(this.intersectionObserverCallback.bind(this),t),this.observer.observe(this.element)}},{key:"intersectionObserverCallback",value:function(t){for(var e=t.length-1;0<=e;e--)t[e].isIntersecting?this.isVisible=!0:this.isVisible=!1}},{key:"checkIfVisible",value:function(){return this.elementBottom>d.positions.top&&this.elementTop<d.positions.bottom}},{key:"getRangeMax",value:function(){var t=this.element.clientHeight;this.rangeMax=t*this.settings.scale-t}},{key:"getTranslateValue",value:function(){var t=((d.positions.bottom-this.elementTop)/((d.positions.height+this.elementHeight)/100)).toFixed(1);return t=Math.min(100,Math.max(0,t)),this.oldPercentage!==t&&(this.rangeMax||this.getRangeMax(),this.translateValue=(t/100*this.rangeMax-this.rangeMax/2).toFixed(0),this.oldTranslateValue!==this.translateValue&&(this.oldPercentage=t,this.oldTranslateValue=this.translateValue,!0))}},{key:"animate",value:function(){var t,e=0,i=0;(this.settings.orientation.includes("left")||this.settings.orientation.includes("right"))&&(i="".concat(this.settings.orientation.includes("left")?-1*this.translateValue:this.translateValue,"px")),(this.settings.orientation.includes("up")||this.settings.orientation.includes("down"))&&(e="".concat(this.settings.orientation.includes("up")?-1*this.translateValue:this.translateValue,"px")),t=!1===this.settings.overflow?"translate3d(".concat(i,", ").concat(e,", 0) scale(").concat(this.settings.scale,")"):"translate3d(".concat(i,", ").concat(e,", 0)"),this.element.style[r]=t}}]),i}();function c(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)}}i.d(e,"viewport",function(){return d}),i.d(e,"default",function(){return b});var f,p,m,d=new s,g=!0,v=!1,y=[],b=function(){function i(t,e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i),t&&(this.elements=o(t),this.defaults={delay:.4,orientation:"up",scale:1.3,overflow:!1,transition:"cubic-bezier(0,0,0,1)",breakpoint:!1},this.settings=Object.assign(this.defaults,e),this.settings.breakpoint&&document.documentElement.clientWidth<=this.settings.breakpoint||("IntersectionObserver"in window||(g=!1),this.lastPosition=-1,this.resizeIsDone=this.resizeIsDone.bind(this),this.handleResize=this.handleResize.bind(this),this.proceedRequestAnimationFrame=this.proceedRequestAnimationFrame.bind(this),this.init()))}return function(t,e,i){e&&c(t.prototype,e),i&&c(t,i)}(i,[{key:"init",value:function(){d.setViewportAll();for(var t=this.elements.length-1;0<=t;t--){var e=new h(this.elements[t],this.settings);y.push(e)}f=y.length,v||(this.proceedRequestAnimationFrame(),window.addEventListener("resize",this.resizeIsDone),v=!0)}},{key:"resizeIsDone",value:function(){clearTimeout(m),m=setTimeout(this.handleResize,500)}},{key:"handleResize",value:function(){d.setViewportAll(),this.settings.breakpoint&&document.documentElement.clientWidth<=this.settings.breakpoint&&this.destroy();for(var t=f-1;0<=t;t--)y[t].getElementOffset(),y[t].getRangeMax();this.lastPosition=-1}},{key:"proceedRequestAnimationFrame",value:function(){if(d.setViewportTop(),this.lastPosition!==d.positions.top){d.setViewportBottom();for(var t=f-1;0<=t;t--)this.proceedElement(y[t]);p=window.requestAnimationFrame(this.proceedRequestAnimationFrame),this.lastPosition=d.positions.top}else p=window.requestAnimationFrame(this.proceedRequestAnimationFrame)}},{key:"proceedElement",value:function(t){(g?t.isVisible:t.checkIfVisible())&&t.getTranslateValue()&&t.animate()}},{key:"destroy",value:function(){var e=this,i=[];y=y.filter(function(t){if(!e.elements.includes(t.element))return t;i.push(t)});for(var t=i.length-1;0<=t;t--)i[t].unSetStyle(),!1===this.settings.overflow&&i[t].unWrapElement();(f=y.length)||(window.cancelAnimationFrame(p),window.removeEventListener("resize",this.handleResize))}}]),i}()}],s.c=n,s.d=function(t,e,i){s.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},s.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(s.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)s.d(i,n,function(t){return e[t]}.bind(null,n));return i},s.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return s.d(e,"a",e),e},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},s.p="",s(s.s=0)).default;function s(t){if(n[t])return n[t].exports;var e=n[t]={i:t,l:!1,exports:{}};return i[t].call(e.exports,e,e.exports,s),e.l=!0,e.exports}var i,n}); | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("simpleParallax",[],e):"object"==typeof exports?exports.simpleParallax=e():t.simpleParallax=e()}(window,function(){return(n={},s.m=i=[function(t,e,i){"use strict";function n(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)}}i.r(e);var s=new(function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.positions={top:0,bottom:0,height:0}}return function(t,e,i){e&&n(t.prototype,e),i&&n(t,i)}(t,[{key:"setViewportTop",value:function(t){return this.positions.top=t?t.scrollTop:window.pageYOffset,this.positions}},{key:"setViewportBottom",value:function(){return this.positions.bottom=this.positions.top+this.positions.height,this.positions}},{key:"setViewportAll",value:function(t){return this.positions.top=t?t.scrollTop:window.pageYOffset,this.positions.height=t?t.clientHeight:document.documentElement.clientHeight,this.positions.bottom=this.positions.top+this.positions.height,this.positions}}]),t}()),o=function(t){return NodeList.prototype.isPrototypeOf(t)||HTMLCollection.prototype.isPrototypeOf(t)?Array.from(t):"string"==typeof t||t instanceof String?document.querySelectorAll(t):[t]},r=function(){for(var t,e="transform webkitTransform mozTransform oTransform msTransform".split(" "),i=0;void 0===t;)t=void 0!==document.createElement("div").style[e[i]]?e[i]:void 0,i+=1;return t}(),a=function(t){return!!t&&(!!t.complete&&(void 0===t.naturalWidth||0!==t.naturalWidth))};function l(t){return function(t){if(Array.isArray(t)){for(var e=0,i=new Array(t.length);e<t.length;e++)i[e]=t[e];return i}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function u(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)}}var h=function(){function i(t,e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i),this.element=t,this.elementContainer=t,this.settings=e,this.isVisible=!0,this.isInit=!1,this.oldTranslateValue=-1,this.init=this.init.bind(this),a(t)?this.init():this.element.addEventListener("load",this.init)}return function(t,e,i){e&&u(t.prototype,e),i&&u(t,i)}(i,[{key:"init",value:function(){var t=this;this.isInit||this.element.closest(".simpleParallax")||(!1===this.settings.overflow&&this.wrapElement(this.element),this.setTransformCSS(),this.getElementOffset(),this.intersectionObserver(),this.getTranslateValue(),this.animate(),0<this.settings.delay&&setTimeout(function(){t.setTransitionCSS()},10),this.isInit=!0)}},{key:"wrapElement",value:function(){var t=this.element.closest("picture")||this.element,e=document.createElement("div");e.classList.add("simpleParallax"),e.style.overflow="hidden",t.parentNode.insertBefore(e,t),e.appendChild(t),this.elementContainer=e}},{key:"unWrapElement",value:function(){var t=this.elementContainer;t.replaceWith.apply(t,l(t.childNodes))}},{key:"setTransformCSS",value:function(){!1===this.settings.overflow&&(this.element.style[r]="scale(".concat(this.settings.scale,")")),this.element.style.willChange="transform"}},{key:"setTransitionCSS",value:function(){this.element.style.transition="transform ".concat(this.settings.delay,"s ").concat(this.settings.transition)}},{key:"unSetStyle",value:function(){this.element.style.willChange="",this.element.style[r]="",this.element.style.transition=""}},{key:"getElementOffset",value:function(){var t=this.elementContainer.getBoundingClientRect();if(this.elementHeight=t.height,this.elementTop=t.top+s.positions.top,this.settings.customContainer){var e=this.settings.customContainer.getBoundingClientRect();this.elementTop=t.top-e.top+s.positions.top}this.elementBottom=this.elementHeight+this.elementTop}},{key:"buildThresholdList",value:function(){for(var t=[],e=1;e<=this.elementHeight;e++){var i=e/this.elementHeight;t.push(i)}return t}},{key:"intersectionObserver",value:function(){var t={root:null,threshold:this.buildThresholdList()};this.observer=new IntersectionObserver(this.intersectionObserverCallback.bind(this),t),this.observer.observe(this.element)}},{key:"intersectionObserverCallback",value:function(t){for(var e=t.length-1;0<=e;e--)t[e].isIntersecting?this.isVisible=!0:this.isVisible=!1}},{key:"checkIfVisible",value:function(){return this.elementBottom>s.positions.top&&this.elementTop<s.positions.bottom}},{key:"getRangeMax",value:function(){var t=this.element.clientHeight;this.rangeMax=t*this.settings.scale-t}},{key:"getTranslateValue",value:function(){var t=((s.positions.bottom-this.elementTop)/((s.positions.height+this.elementHeight)/100)).toFixed(1);return t=Math.min(100,Math.max(0,t)),this.oldPercentage!==t&&(this.rangeMax||this.getRangeMax(),this.translateValue=(t/100*this.rangeMax-this.rangeMax/2).toFixed(0),this.oldTranslateValue!==this.translateValue&&(this.oldPercentage=t,this.oldTranslateValue=this.translateValue,!0))}},{key:"animate",value:function(){var t,e=0,i=0;(this.settings.orientation.includes("left")||this.settings.orientation.includes("right"))&&(i="".concat(this.settings.orientation.includes("left")?-1*this.translateValue:this.translateValue,"px")),(this.settings.orientation.includes("up")||this.settings.orientation.includes("down"))&&(e="".concat(this.settings.orientation.includes("up")?-1*this.translateValue:this.translateValue,"px")),t=!1===this.settings.overflow?"translate3d(".concat(i,", ").concat(e,", 0) scale(").concat(this.settings.scale,")"):"translate3d(".concat(i,", ").concat(e,", 0)"),this.element.style[r]=t}}]),i}();function c(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)}}i.d(e,"default",function(){return y});var f,m,p,d=!0,g=!1,v=[],y=function(){function i(t,e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i),t&&(this.elements=o(t),this.defaults={delay:.4,orientation:"up",scale:1.3,overflow:!1,transition:"cubic-bezier(0,0,0,1)",customContainer:!1},this.settings=Object.assign(this.defaults,e),"IntersectionObserver"in window||(d=!1),this.settings.customContainer&&(console.log(o(this.settings.customContainer)[0]),this.customContainer=o(this.settings.customContainer)[0]),this.lastPosition=-1,this.resizeIsDone=this.resizeIsDone.bind(this),this.handleResize=this.handleResize.bind(this),this.proceedRequestAnimationFrame=this.proceedRequestAnimationFrame.bind(this),this.init())}return function(t,e,i){e&&c(t.prototype,e),i&&c(t,i)}(i,[{key:"init",value:function(){s.setViewportAll(this.customContainer);for(var t=this.elements.length-1;0<=t;t--){var e=new h(this.elements[t],this.settings);v.push(e)}f=v.length,g||(this.proceedRequestAnimationFrame(),window.addEventListener("resize",this.resizeIsDone),g=!0)}},{key:"resizeIsDone",value:function(){clearTimeout(p),p=setTimeout(this.handleResize,500)}},{key:"handleResize",value:function(){s.setViewportAll(this.customContainer);for(var t=f-1;0<=t;t--)v[t].getElementOffset(),v[t].getRangeMax();this.lastPosition=-1}},{key:"proceedRequestAnimationFrame",value:function(){if(s.setViewportTop(this.customContainer),this.lastPosition!==s.positions.top){s.setViewportBottom();for(var t=f-1;0<=t;t--)this.proceedElement(v[t]);m=window.requestAnimationFrame(this.proceedRequestAnimationFrame),this.lastPosition=s.positions.top}else m=window.requestAnimationFrame(this.proceedRequestAnimationFrame)}},{key:"proceedElement",value:function(t){(!d||this.customContainer?t.checkIfVisible():t.isVisible)&&t.getTranslateValue()&&t.animate()}},{key:"destroy",value:function(){var e=this,i=[];v=v.filter(function(t){return e.elements.includes(t.element)?(i.push(t),!1):t});for(var t=i.length-1;0<=t;t--)i[t].unSetStyle(),!1===this.settings.overflow&&i[t].unWrapElement();(f=v.length)||(window.cancelAnimationFrame(m),window.removeEventListener("resize",this.handleResize))}}]),i}()}],s.c=n,s.d=function(t,e,i){s.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},s.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(s.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)s.d(i,n,function(t){return e[t]}.bind(null,n));return i},s.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return s.d(e,"a",e),e},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},s.p="",s(s.s=0)).default;function s(t){if(n[t])return n[t].exports;var e=n[t]={i:t,l:!1,exports:{}};return i[t].call(e.exports,e,e.exports,s),e.l=!0,e.exports}var i,n}); |
| { | ||
| "name": "simple-parallax-js", | ||
| "version": "5.1.0", | ||
| "version": "5.2.0", | ||
| "description": "simpleParallax is a simple JavaScript library that gives your website parallax animations on any images", | ||
| "homepage": "https://simpleparallax.com/", | ||
| "main": "dist/simpleParallax.min.js", | ||
| "main": "./dist/simpleParallax.min.js", | ||
| "types": "./index.d.ts", | ||
| "repository": { | ||
@@ -30,3 +31,3 @@ "type": "git", | ||
| "format": "prettier --write '**/**.{js,json,html}'", | ||
| "lint": "eslint src --ext .js", | ||
| "lint": "eslint src --ext .js --fix", | ||
| "test": "jest" | ||
@@ -50,21 +51,21 @@ }, | ||
| "html-webpack-plugin": "^3.2.0", | ||
| "webpack": "^4.32.2", | ||
| "webpack-dev-server": "^3.3.1" | ||
| "webpack": "^4.41.2", | ||
| "webpack-dev-server": "^3.9.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.4.4", | ||
| "@babel/preset-env": "^7.4.4", | ||
| "@babel/core": "^7.7.4", | ||
| "@babel/preset-env": "^7.7.4", | ||
| "babel-loader": "^8.0.6", | ||
| "eslint": "^5.16.0", | ||
| "eslint-config-airbnb-base": "^13.1.0", | ||
| "eslint-plugin-import": "^2.17.3", | ||
| "eslint-plugin-node": "^9.1.0", | ||
| "husky": "^2.3.0", | ||
| "jest": "^24.8.0", | ||
| "lint-staged": "^8.1.7", | ||
| "eslint": "^6.7.2", | ||
| "eslint-config-airbnb-base": "^14.0.0", | ||
| "eslint-plugin-import": "^2.18.2", | ||
| "eslint-plugin-node": "^10.0.0", | ||
| "husky": "^3.1.0", | ||
| "jest": "^24.9.0", | ||
| "lint-staged": "^9.5.0", | ||
| "moment": "^2.24.0", | ||
| "prettier": "^1.17.1", | ||
| "uglifyjs-webpack-plugin": "^2.1.3", | ||
| "webpack-cli": "^3.3.2" | ||
| "prettier": "^1.19.1", | ||
| "uglifyjs-webpack-plugin": "^2.2.0", | ||
| "webpack-cli": "^3.3.10" | ||
| } | ||
| } |
@@ -1,2 +0,2 @@ | ||
|  | ||
|  | ||
@@ -27,3 +27,3 @@ [](https://badge.fury.io/gh/geosenna%2FsimpleParallax) | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.0.2/dist/simpleParallax.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.1.0/dist/simpleParallax.min.js"></script> | ||
| ``` | ||
@@ -77,3 +77,3 @@ | ||
| transition | string | false | any CSS transition | ||
| breakpoint | int | false | the breakpoint is in pixel | ||
| customContainer | string or node | false | this can be a string of directly a node | ||
@@ -107,4 +107,4 @@ You can apply these settings with the following JS code: | ||
| ### breakpoint - *int* | ||
| The minimum breakpoint from where simpleParallax should be initialized and to where simpleParallax should be destroyed. | ||
| ###customContainer - *string or node* | ||
| In some cases, you want the parallax effects to be apply on a container that have its own scroll, and not apply the parallax effects via the document scroll. | ||
@@ -111,0 +111,0 @@ ## Methods |
@@ -6,8 +6,9 @@ class Viewport { | ||
| bottom: 0, | ||
| height: 0 | ||
| height: 0, | ||
| }; | ||
| } | ||
| setViewportTop() { | ||
| this.positions.top = window.pageYOffset; | ||
| setViewportTop(container) { | ||
| // if this is a custom container, user the scrollTop | ||
| this.positions.top = (container ? container.scrollTop : window.pageYOffset); | ||
| return this.positions; | ||
@@ -21,11 +22,9 @@ } | ||
| setViewportHeight() { | ||
| this.positions.height = document.documentElement.clientHeight; | ||
| return this.positions; | ||
| } | ||
| setViewportAll(container) { | ||
| // if this is a custom container, user the scrollTop | ||
| this.positions.top = (container ? container.scrollTop : window.pageYOffset); | ||
| // if this is a custom container, get the height from the custom container itself | ||
| this.positions.height = (container ? container.clientHeight : document.documentElement.clientHeight); | ||
| this.positions.bottom = this.positions.top + this.positions.height; | ||
| setViewportAll() { | ||
| this.positions.top = window.pageYOffset; | ||
| this.positions.bottom = this.positions.top + this.positions.height; | ||
| this.positions.height = document.documentElement.clientHeight; | ||
| return this.positions; | ||
@@ -35,2 +34,3 @@ } | ||
| export default Viewport; | ||
| export const viewport = new Viewport(); | ||
| export { viewport as default }; |
| import cssTransform from '../helpers/cssTransform'; | ||
| import isImageLoaded from '../helpers/isImageLoaded'; | ||
| import { viewport } from '../helpers/viewport'; | ||
| import { viewport } from '../simpleParallax'; | ||
| class ParallaxInstance { | ||
@@ -39,4 +38,4 @@ constructor(element, options) { | ||
| // apply the default style on the image | ||
| this.setStyle(); | ||
| // apply the transform style on the image | ||
| this.setTransformCSS(); | ||
@@ -55,2 +54,11 @@ // get the current element offset | ||
| // if a delay has been set | ||
| if (this.settings.delay > 0) { | ||
| // apply a timeout to avoid buggy effect | ||
| setTimeout(() => { | ||
| // apply the transition style on the image | ||
| this.setTransitionCSS(); | ||
| }, 10); | ||
| } | ||
| // for some reason, <picture> are init an infinite time on windows OS | ||
@@ -85,3 +93,3 @@ this.isInit = true; | ||
| // apply default style on element | ||
| setStyle() { | ||
| setTransformCSS() { | ||
| if (this.settings.overflow === false) { | ||
@@ -93,8 +101,2 @@ // if overflow option is set to false | ||
| if (this.settings.delay > 0) { | ||
| // if delay option is set to true | ||
| // add transition option | ||
| this.element.style.transition = `transform ${this.settings.delay}s ${this.settings.transition}`; | ||
| } | ||
| // add will-change CSS property to improve perfomance | ||
@@ -104,2 +106,8 @@ this.element.style.willChange = 'transform'; | ||
| // apply the transition effet | ||
| setTransitionCSS() { | ||
| // add transition option | ||
| this.element.style.transition = `transform ${this.settings.delay}s ${this.settings.transition}`; | ||
| } | ||
| // remove style of the element | ||
@@ -121,2 +129,8 @@ unSetStyle() { | ||
| this.elementTop = positions.top + viewport.positions.top; | ||
| // if there is a custom container | ||
| if (this.settings.customContainer) { | ||
| // we need to do some calculation to get the position from the parent rather than the viewport | ||
| const parentPositions = this.settings.customContainer.getBoundingClientRect(); | ||
| this.elementTop = (positions.top - parentPositions.top) + viewport.positions.top; | ||
| } | ||
| // get offset bottom | ||
@@ -140,3 +154,3 @@ this.elementBottom = this.elementHeight + this.elementTop; | ||
| root: null, | ||
| threshold: this.buildThresholdList() | ||
| threshold: this.buildThresholdList(), | ||
| }; | ||
@@ -143,0 +157,0 @@ this.observer = new IntersectionObserver(this.intersectionObserverCallback.bind(this), options); |
@@ -1,2 +0,2 @@ | ||
| import Viewport from './helpers/viewport'; | ||
| import { viewport } from './helpers/viewport'; | ||
| import convertToArray from './helpers/convertToArray'; | ||
@@ -6,4 +6,2 @@ | ||
| export const viewport = new Viewport(); | ||
| let intersectionObserverAvailable = true; | ||
@@ -26,3 +24,3 @@ let isInit = false; | ||
| transition: 'cubic-bezier(0,0,0,1)', | ||
| breakpoint: false | ||
| customContainer: false, | ||
| }; | ||
@@ -32,10 +30,10 @@ | ||
| // check if breakpoint is set and superior to user browser width | ||
| if (this.settings.breakpoint && document.documentElement.clientWidth <= this.settings.breakpoint) { | ||
| return; | ||
| } | ||
| // check if the browser handle the Intersection Observer API | ||
| if (!('IntersectionObserver' in window)) intersectionObserverAvailable = false; | ||
| if (this.settings.customContainer) { | ||
| console.log(convertToArray(this.settings.customContainer)[0]) | ||
| this.customContainer = convertToArray(this.settings.customContainer)[0]; | ||
| } | ||
| this.lastPosition = -1; | ||
@@ -51,3 +49,3 @@ | ||
| init() { | ||
| viewport.setViewportAll(); | ||
| viewport.setViewportAll(this.customContainer); | ||
@@ -82,8 +80,4 @@ for (let i = this.elements.length - 1; i >= 0; i--) { | ||
| // re-get all the viewport positions | ||
| viewport.setViewportAll(); | ||
| viewport.setViewportAll(this.customContainer); | ||
| if (this.settings.breakpoint && document.documentElement.clientWidth <= this.settings.breakpoint) { | ||
| this.destroy(); | ||
| } | ||
| for (let i = instancesLength - 1; i >= 0; i--) { | ||
@@ -104,3 +98,3 @@ // re-get the current element offset | ||
| // get the offset top of the viewport | ||
| viewport.setViewportTop(); | ||
| viewport.setViewportTop(this.customContainer); | ||
@@ -135,4 +129,5 @@ if (this.lastPosition === viewport.positions.top) { | ||
| // is not support for Intersection Observer API | ||
| // or if this is a custom container | ||
| // use old function to check if element visible | ||
| if (!intersectionObserverAvailable) { | ||
| if (!intersectionObserverAvailable || this.customContainer) { | ||
| isVisible = instance.checkIfVisible(); | ||
@@ -165,5 +160,5 @@ // if support | ||
| instancesToDestroy.push(instance); | ||
| } else { | ||
| return instance; | ||
| return false; | ||
| } | ||
| return instance; | ||
| }); | ||
@@ -170,0 +165,0 @@ |
@@ -8,3 +8,4 @@ import SimpleParallax from '../src/simpleParallax'; | ||
| const optionUp = { | ||
| orientation: 'left' | ||
| orientation: 'left', | ||
| // customContainer: document.querySelector('.container') | ||
| }; | ||
@@ -11,0 +12,0 @@ const imageUp = document.getElementsByTagName('img'); |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by1.77%
77812
- Number of package files
- increased by4.76%
22
- Lines of code
- increased by2.91%
1097
Dependency changes
Updatedwebpack@^4.41.2
Updatedwebpack-dev-server@^3.9.0