parallaxis - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/parallaxis.js

@@ -144,6 +144,8 @@ (function (global, factory) {
     var opacityEnd = parseFloat(el.dataset.opacityEnd);
-    var translateXStart = parseFloat(el.dataset.translatexStart);
-    var translateXEnd = parseFloat(el.dataset.translatexEnd);
-    var translateYStart = parseFloat(el.dataset.translateyStart);
-    var translateYEnd = parseFloat(el.dataset.translateyEnd);
+    var translateXStart = parseInt(el.dataset.translatexStart, 10);
+    var translateXEnd = parseInt(el.dataset.translatexEnd, 10);
+    var translateYStart = parseInt(el.dataset.translateyStart, 10);
+    var translateYEnd = parseInt(el.dataset.translateyEnd, 10);
+    var scaleStart = parseFloat(el.dataset.scaleStart);
+    var scaleEnd = parseFloat(el.dataset.scaleEnd);
     var updates = {};
@@ -172,2 +174,9 @@
 
+    if (!isNaN(scaleStart) && !isNaN(scaleEnd)) {
+      updates.scale = {
+        end: scaleEnd,
+        start: scaleStart
+      };
+    }
+
     if (typeof end === 'undefined' || typeof start === 'undefined' || Object.keys(updates) === 0) {
@@ -251,2 +260,3 @@ return null;
         var translateY = 0;
+        var scale = 1;
 
@@ -281,4 +291,12 @@ var current = limit(start, end, y);
 
-        el.style[transformProp] = 'translate3d(' + translateX + 'px, ' + translateY + 'px, 0)';
+        if (updates.scale) {
+          var _updates$scale = updates.scale,
+              _end4 = _updates$scale.end,
+              _start4 = _updates$scale.start;
 
+          scale = interpolate(_start4, _end4, i).toFixed(2);
+        }
+
+        el.style[transformProp] = 'translate3d(' + translateX + 'px, ' + translateY + 'px, 0) scale(' + scale + ')';
+
         if (y < start) {
@@ -285,0 +303,0 @@ cache.set(el, 'before');

dist/parallaxis.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.parallaxis=e()}(this,function(){"use strict";function t(t,e){return e={exports:{}},t(e,e.exports),e.exports}function e(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e<t.length;e++)n[e]=t[e];return n}return Array.from(t)}for(var n="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},a=t(function(t){(function(){var e,n,a;"undefined"!=typeof performance&&null!==performance&&performance.now?t.exports=function(){return performance.now()}:"undefined"!=typeof process&&null!==process&&process.hrtime?(t.exports=function(){return(e()-a)/1e6},n=process.hrtime,e=function(){var t;return t=n(),1e9*t[0]+t[1]},a=e()):Date.now?(t.exports=function(){return Date.now()-a},a=Date.now()):(t.exports=function(){return(new Date).getTime()-a},a=(new Date).getTime())}).call(n)}),r=a,o="undefined"==typeof window?n:window,i=["moz","webkit"],s="AnimationFrame",f=o["request"+s],l=o["cancel"+s]||o["cancelRequest"+s],u=0;!f&&u<i.length;u++)f=o[i[u]+"Request"+s],l=o[i[u]+"Cancel"+s]||o[i[u]+"CancelRequest"+s];if(!f||!l){var c=0,d=0,p=[],m=1e3/60;f=function(t){if(0===p.length){var e=r(),n=Math.max(0,m-(e-c));c=n+e,setTimeout(function(){var t=p.slice(0);p.length=0;for(var e=0;e<t.length;e++)if(!t[e].cancelled)try{t[e].callback(c)}catch(t){setTimeout(function(){throw t},0)}},Math.round(n))}return p.push({handle:++d,callback:t,cancelled:!1}),d},l=function(t){for(var e=0;e<p.length;e++)p[e].handle===t&&(p[e].cancelled=!0)}}var y=function(t){return f.call(o,t)},v=function(){l.apply(o,arguments)},w=function(){o.requestAnimationFrame=f,o.cancelAnimationFrame=l};y.cancel=v,y.polyfill=w;var h=new WeakMap,x=function(t,e){return Math.abs(t-e)},g=function(t){var n=[].concat(e(document.querySelectorAll("."+t)));return n.map(function(t){var e=parseInt(t.dataset.end,10),n=parseInt(t.dataset.start,10),a=parseFloat(t.dataset.opacityStart),r=parseFloat(t.dataset.opacityEnd),o=parseFloat(t.dataset.translatexStart),i=parseFloat(t.dataset.translatexEnd),s=parseFloat(t.dataset.translateyStart),f=parseFloat(t.dataset.translateyEnd),l={};return isNaN(a)||isNaN(r)||(l.opacity={end:r,start:a}),isNaN(o)||isNaN(i)||(l.translateX={end:i,start:o}),isNaN(s)||isNaN(f)||(l.translateY={end:f,start:s}),"undefined"==typeof e||"undefined"==typeof n||0===Object.keys(l)?null:{el:t,end:e,start:n,updates:l}}).filter(function(t){return t})},b=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.className,n=void 0===e?"js-parallaxis":e,a=g(n);a.length&&!function(){var t=T(a);window.addEventListener("scroll",function(){return y(t)})}()},N=function(t,e,n){var a=x(t,e)*n;return t>e?t-a:t+a},F=function(t,e,n){return x(t,n)/x(t,e)},A=function(t,e,n){return Math.max(Math.min(n,e),t)},k=function(){var t=document.createElement("div"),e=["Webkit","webkit","Moz","moz","ms","o"];if(null!=t.style.transform)return"transform";for(var n in e){var a=e[n]+"Transform";if("undefined"!=typeof t.style[a])return a}},M=function(){return parseInt(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,10)},T=function(t){var e=k();return function(){var n=M();t.map(function(t){var a=t.el,r=t.end,o=t.start,i=t.updates,s=h.get(a);if(n>=o&&n<=r||"before"!==s&&n<o||"after"!==s&&n>r){var f=0,l=0,u=A(o,r,n),c=F(o,r,u);if(i.opacity){var d=i.opacity,p=d.end,m=d.start,y=N(m,p,c).toFixed(2);a.style.opacity=y}if(i.translateX){var v=i.translateX,w=v.end,x=v.start;f=parseInt(N(x,w,c),10)}if(i.translateY){var g=i.translateY,b=g.end,k=g.start;l=parseInt(N(k,b,c),10)}a.style[e]="translate3d("+f+"px, "+l+"px, 0)",n<o?h.set(a,"before"):n>r?h.set(a,"after"):h.set(a,"during")}})}};return b});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.parallaxis=e()}(this,function(){"use strict";function t(t,e){return e={exports:{}},t(e,e.exports),e.exports}function e(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e<t.length;e++)n[e]=t[e];return n}return Array.from(t)}for(var n="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},a=t(function(t){(function(){var e,n,a;"undefined"!=typeof performance&&null!==performance&&performance.now?t.exports=function(){return performance.now()}:"undefined"!=typeof process&&null!==process&&process.hrtime?(t.exports=function(){return(e()-a)/1e6},n=process.hrtime,e=function(){var t;return t=n(),1e9*t[0]+t[1]},a=e()):Date.now?(t.exports=function(){return Date.now()-a},a=Date.now()):(t.exports=function(){return(new Date).getTime()-a},a=(new Date).getTime())}).call(n)}),r=a,o="undefined"==typeof window?n:window,s=["moz","webkit"],i="AnimationFrame",l=o["request"+i],c=o["cancel"+i]||o["cancelRequest"+i],f=0;!l&&f<s.length;f++)l=o[s[f]+"Request"+i],c=o[s[f]+"Cancel"+i]||o[s[f]+"CancelRequest"+i];if(!l||!c){var u=0,d=0,p=[],m=1e3/60;l=function(t){if(0===p.length){var e=r(),n=Math.max(0,m-(e-u));u=n+e,setTimeout(function(){var t=p.slice(0);p.length=0;for(var e=0;e<t.length;e++)if(!t[e].cancelled)try{t[e].callback(u)}catch(t){setTimeout(function(){throw t},0)}},Math.round(n))}return p.push({handle:++d,callback:t,cancelled:!1}),d},c=function(t){for(var e=0;e<p.length;e++)p[e].handle===t&&(p[e].cancelled=!0)}}var y=function(t){return l.call(o,t)},v=function(){c.apply(o,arguments)},w=function(){o.requestAnimationFrame=l,o.cancelAnimationFrame=c};y.cancel=v,y.polyfill=w;var h=new WeakMap,x=function(t,e){return Math.abs(t-e)},N=function(t){var n=[].concat(e(document.querySelectorAll("."+t)));return n.map(function(t){var e=parseInt(t.dataset.end,10),n=parseInt(t.dataset.start,10),a=parseFloat(t.dataset.opacityStart),r=parseFloat(t.dataset.opacityEnd),o=parseInt(t.dataset.translatexStart,10),s=parseInt(t.dataset.translatexEnd,10),i=parseInt(t.dataset.translateyStart,10),l=parseInt(t.dataset.translateyEnd,10),c=parseFloat(t.dataset.scaleStart),f=parseFloat(t.dataset.scaleEnd),u={};return isNaN(a)||isNaN(r)||(u.opacity={end:r,start:a}),isNaN(o)||isNaN(s)||(u.translateX={end:s,start:o}),isNaN(i)||isNaN(l)||(u.translateY={end:l,start:i}),isNaN(c)||isNaN(f)||(u.scale={end:f,start:c}),"undefined"==typeof e||"undefined"==typeof n||0===Object.keys(u)?null:{el:t,end:e,start:n,updates:u}}).filter(function(t){return t})},g=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.className,n=void 0===e?"js-parallaxis":e,a=N(n);a.length&&!function(){var t=E(a);window.addEventListener("scroll",function(){return y(t)})}()},b=function(t,e,n){var a=x(t,e)*n;return t>e?t-a:t+a},F=function(t,e,n){return x(t,n)/x(t,e)},I=function(t,e,n){return Math.max(Math.min(n,e),t)},A=function(){var t=document.createElement("div"),e=["Webkit","webkit","Moz","moz","ms","o"];if(null!=t.style.transform)return"transform";for(var n in e){var a=e[n]+"Transform";if("undefined"!=typeof t.style[a])return a}},k=function(){return parseInt(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,10)},E=function(t){var e=A();return function(){var n=k();t.map(function(t){var a=t.el,r=t.end,o=t.start,s=t.updates,i=h.get(a);if(n>=o&&n<=r||"before"!==i&&n<o||"after"!==i&&n>r){var l=0,c=0,f=1,u=I(o,r,n),d=F(o,r,u);if(s.opacity){var p=s.opacity,m=p.end,y=p.start,v=b(y,m,d).toFixed(2);a.style.opacity=v}if(s.translateX){var w=s.translateX,x=w.end,N=w.start;l=parseInt(b(N,x,d),10)}if(s.translateY){var g=s.translateY,A=g.end,k=g.start;c=parseInt(b(k,A,d),10)}if(s.scale){var E=s.scale,M=E.end,T=E.start;f=b(T,M,d).toFixed(2)}a.style[e]="translate3d("+l+"px, "+c+"px, 0) scale("+f+")",n<o?h.set(a,"before"):n>r?h.set(a,"after"):h.set(a,"during")}})}};return g});

lib/index.js

@@ -29,6 +29,8 @@ 'use strict';
     var opacityEnd = parseFloat(el.dataset.opacityEnd);
-    var translateXStart = parseFloat(el.dataset.translatexStart);
-    var translateXEnd = parseFloat(el.dataset.translatexEnd);
-    var translateYStart = parseFloat(el.dataset.translateyStart);
-    var translateYEnd = parseFloat(el.dataset.translateyEnd);
+    var translateXStart = parseInt(el.dataset.translatexStart, 10);
+    var translateXEnd = parseInt(el.dataset.translatexEnd, 10);
+    var translateYStart = parseInt(el.dataset.translateyStart, 10);
+    var translateYEnd = parseInt(el.dataset.translateyEnd, 10);
+    var scaleStart = parseFloat(el.dataset.scaleStart);
+    var scaleEnd = parseFloat(el.dataset.scaleEnd);
     var updates = {};
@@ -57,2 +59,9 @@
 
+    if (!isNaN(scaleStart) && !isNaN(scaleEnd)) {
+      updates.scale = {
+        end: scaleEnd,
+        start: scaleStart
+      };
+    }
+
     if (typeof end === 'undefined' || typeof start === 'undefined' || Object.keys(updates) === 0) {
@@ -136,2 +145,3 @@ return null;
         var translateY = 0;
+        var scale = 1;
 
@@ -166,4 +176,12 @@ var current = limit(start, end, y);
 
-        el.style[transformProp] = 'translate3d(' + translateX + 'px, ' + translateY + 'px, 0)';
+        if (updates.scale) {
+          var _updates$scale = updates.scale,
+              _end4 = _updates$scale.end,
+              _start4 = _updates$scale.start;
 
+          scale = interpolate(_start4, _end4, i).toFixed(2);
+        }
+
+        el.style[transformProp] = 'translate3d(' + translateX + 'px, ' + translateY + 'px, 0) scale(' + scale + ')';
+
         if (y < start) {
@@ -170,0 +188,0 @@ cache.set(el, 'before');

package.json

@@ -88,3 +88,3 @@ {
   },
-  "version": "1.0.1"
+  "version": "1.1.0"
 }

README.md

@@ -21,2 +21,3 @@ # Parallaxis
 - `translateY`
+- `scale`
 
@@ -173,2 +174,19 @@ For best performance try to only use Parallaxis on one or
 
+#### scale
+
+Defining `data-scale-start` **and** `data-scale-end`
+will result in `transform: scale()` style updates.
+
+```html
+<h1
+  class="js-parallaxis"
+  data-start="0"
+  data-end="200"
+  data-scale-start="1"
+  data-scale-end="4"
+>
+  Hello world
+</h1>
+```
+
 ## Browser support
@@ -175,0 +193,0 @@

No alert changes

Improved metrics

Total package byte prevSize

25077

increased by6.79%

Lines of code

423

increased by7.91%

Number of lines in readme file

198

increased by10%

No dependency changes