smooth-parallax - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

bower.json

 {
   "name": "smooth-parallax",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "homepage": "http://diegoversiani.me/smooth-parallax",
@@ -28,3 +28,3 @@ "authors": [
   "_source": "https://github.com/diegoversiani/smooth-parallax.git",
-  "_target": "~1.1.0"
+  "_target": "~1.1.2"
 }

dist/smooth-parallax.js

 /**
- * SmoothParallax 1.1.0
+ * SmoothParallax 1.1.2
  * 
@@ -15,3 +15,3 @@ * File smooth-parallax.js.
  * Author: Diego Versiani
- * Contact: http://diegoversiani.me
+ * Contact: https://diegoversiani.me/
  * 
@@ -51,2 +51,3 @@ * Based on the work of:
     basePercentageOn: 'containerVisibility', // See `_basePercentageOnOptions` for more options
+    decimalPrecision: 2
   };
@@ -102,2 +103,4 @@
 
+
+
   /**
@@ -118,3 +121,18 @@ * Get movable element container
 
+
+
   /**
+   * Calculate page percent scrolled.
+   * @private
+   */
+  var calculatePageScrollPercent = function () {
+    var documentElement = document.documentElement || document.body;
+    _height = documentElement.scrollHeight;
+    _scrollOffset = window.pageYOffset || documentElement.scrollTop;
+    return _scrollOffset / ( _height - documentElement.clientHeight );
+  };
+
+
+
+  /**
    * Calculate variables used to determine elements position
@@ -129,5 +147,4 @@ * @private
       _height = positionData.container.scrollHeight;
-      _scrollHeight = _height - _viewPortHeight;
       _scrollOffset = _viewPortHeight - positionData.container.getBoundingClientRect().top;
-      _scrollPercent = _scrollOffset / _scrollHeight || 0;
+      _scrollPercent = _scrollOffset / _height;
     }
@@ -137,6 +154,3 @@
     if ( _settings.basePercentageOn == 'pageScroll' ) {
-      var documentElement = document.documentElement || document.body;
-      _height = documentElement.scrollHeight;
-      _scrollOffset = window.pageYOffset || documentElement.scrollTop;
-      _scrollPercent = _scrollOffset / ( _height - documentElement.clientHeight );
+      _scrollPercent = calculatePageScrollPercent();
     }
@@ -153,3 +167,22 @@
 
+
+
   /**
+   * Get position data object for the element.
+   * @returns {Object} Position data object for element or false if not found.
+   */
+  var getPositionDataByElement = function ( el ) {
+    for (var i = 0; i < _positions.length; i++) {
+      if ( _positions[i].element == el ) {
+        return _positions[i];
+      }
+    }
+    
+    // Return false if not found
+    return false;
+  }
+
+
+
+  /**
    * Initializes positions for each moving element.
@@ -184,2 +217,3 @@ * @private
       var elementPosition = {
+        element: _movingElements[i],
         container: getElementContainer( _movingElements[i] ),
@@ -221,9 +255,11 @@ baseSizeOn: baseSizeOn,
 
+      // Try get element's size with `scrollWidth` and `scrollHeight`
+      // otherwise use `getComputedStyle` which is more expensive
       if ( p.baseSizeOn == 'elementSize' ) {
-        baseWidth = _movingElements[i].scrollWidth;
-        baseHeight = _movingElements[i].scrollHeight;
+        baseWidth = _movingElements[i].scrollWidth || parseFloat( window.getComputedStyle( _movingElements[i] ).width );
+        baseHeight = _movingElements[i].scrollHeight || parseFloat( window.getComputedStyle( _movingElements[i] ).height );
       }
       else if ( p.baseSizeOn == 'containerSize' ) {
-        baseWidth = p.container.scrollWidth - _movingElements[i].scrollWidth;
-        baseHeight = p.container.scrollHeight - _movingElements[i].scrollHeight;
+        baseWidth = p.container.scrollWidth - (_movingElements[i].scrollWidth || parseFloat( window.getComputedStyle( _movingElements[i] ).width ) );
+        baseHeight = p.container.scrollHeight - (_movingElements[i].scrollHeight  || parseFloat( window.getComputedStyle( _movingElements[i] ).height ) );
       }
@@ -258,2 +294,7 @@
 
+      // Round to decimal precision to prevent
+      // too many calculation trips
+      p.current.x = parseFloat( p.current.x.toFixed( _settings.decimalPrecision ) );
+      p.current.y = parseFloat( p.current.y.toFixed( _settings.decimalPrecision ) );
+
       // update element style
@@ -298,2 +339,3 @@ _movingElements[i].style.transform = 'translate3d(' + p.current.x + 'px, ' + p.current.y + 'px, 0)';
     _settings = extend( defaults, options || {} );
+    _settings.decimalPrecision = parseInt( _settings.decimalPrecision ) || defaults.decimalPrecision;
 
@@ -309,6 +351,26 @@ // Bail early if not supported
   /**
-   * Exposes scroll percentage
+   * Get scroll percentage for the element or page.
+   * @param {string} el Target element css selector.
+   * @return {float} Scroll percentage for the element or the page.
    */
-  publicMethods.getScrollPercent = function () {
-    return _scrollPercent;
+  publicMethods.getScrollPercent = function ( selector ) {
+    // Calculate page scroll if no selector was passed
+    if ( selector == undefined ) {
+      return calculatePageScrollPercent();
+    }
+
+    // Find element
+    // Return false if not found
+    var el = document.querySelector( selector );
+    if ( el == null ) return false;
+
+    // Calculate element scroll percent
+    var positionData = getPositionDataByElement( el );
+    if ( positionData ) {
+      calculatePercent( positionData );
+      return _scrollPercent;
+    }
+
+    // Return false otherwise
+    return false;
   };
@@ -315,0 +377,0 @@

dist/smooth-parallax.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"function"==typeof define&&define.amd?define([],e(t)):"object"==typeof exports?module.exports=e(t):t.SmoothParallax=e(t)}("undefined"!=typeof global?global:this.window||this.global,function(t){"use strict";var e,r,n,o,i,a=t,c=0,l=0,s=[],u=[],g=["containerVisibility","pageScroll"],p={},f={basePercentageOn:"containerVisibility"},d=function(){var t={},e=!1,r=0,n=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(e=arguments[0],r++);for(;r<n;r++)!function(r){for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e&&"[object Object]"===Object.prototype.toString.call(r[n])?t[n]=d(!0,t[n],r[n]):t[n]=r[n])}(arguments[r]);return t},y=function(t){var r=t.getAttribute("container");return e=t.parentNode,""!=r&&document.querySelector(r)&&(e=document.querySelector(r)),e},b=function(t){if(o=a.innerHeight,"containerVisibility"==i.basePercentageOn&&(r=t.container.scrollHeight,n=r-o,l=o-t.container.getBoundingClientRect().top,c=l/n||0),"pageScroll"==i.basePercentageOn){var e=document.documentElement||document.body;r=e.scrollHeight,l=a.pageYOffset||e.scrollTop,c=l/(r-e.clientHeight)}c<0?c=0:c>1&&(c=1)},x=function(){var t,e,r,n,o,i,a,c=["elementsize","containerSize"];s=document.querySelectorAll("[smooth-parallax]");for(var l=0;l<s.length;l++){t=parseFloat(s[l].getAttribute("start-movement"))||0,e=parseFloat(s[l].getAttribute("start-position-x"))||0,r=parseFloat(s[l].getAttribute("start-position-y"))||0,n=parseFloat(s[l].getAttribute("end-movement"))||1,o=parseFloat(s[l].getAttribute("end-position-x"))||0,i=parseFloat(s[l].getAttribute("end-position-y"))||0,a=s[l].getAttribute("base-size"),-1==c.indexOf(a)&&(a="elementSize");var g={container:y(s[l]),baseSizeOn:a,start:{percent:t,x:e,y:r},end:{percent:n,x:o,y:i},diff:{percent:n-t,x:o-e,y:i-r},target:{},current:{}};u.push(g)}},m=function(){for(var t=0;t<s.length;t++){var e,r,n=u[t];"elementSize"==n.baseSizeOn?(e=s[t].scrollWidth,r=s[t].scrollHeight):"containerSize"==n.baseSizeOn&&(e=n.container.scrollWidth-s[t].scrollWidth,r=n.container.scrollHeight-s[t].scrollHeight),b(n),c<=n.start.percent?(n.target.x=n.start.x*e,n.target.y=n.start.y*r):c>=n.end.percent?(n.target.x=n.end.x*e,n.target.y=n.end.y*r):(n.target.x=n.start.x*e+n.diff.x*(c-n.start.percent)/n.diff.percent*e,n.target.y=n.start.y*r+n.diff.y*(c-n.start.percent)/n.diff.percent*r),n.current.x&&n.current.y?(n.current.x=n.current.x+.1*(n.target.x-n.current.x),n.current.y=n.current.y+.1*(n.target.y-n.current.y)):(n.current.x=n.target.x,n.current.y=n.target.y),s[t].style.transform="translate3d("+n.current.x+"px, "+n.current.y+"px, 0)"}},h=function(){m(),requestAnimationFrame(h)},O=function(){var t=!0;return-1==g.indexOf(i.basePercentageOn)&&(t=!1,console.error("Value not supported for setting basePercentageOn: "+i.basePercentageOn)),t};return p.init=function(t){i=d(f,t||{}),O()&&(x(),h())},p.getScrollPercent=function(){return c},p});
+!function(e,t){"function"==typeof define&&define.amd?define([],t(e)):"object"==typeof exports?module.exports=t(e):e.SmoothParallax=t(e)}("undefined"!=typeof global?global:this.window||this.global,function(e){"use strict";var t,r,n,o,i=e,a=0,c=0,l=[],s=[],u=["containerVisibility","pageScroll"],g={},p={basePercentageOn:"containerVisibility",decimalPrecision:2},d=function(){var e={},t=!1,r=0,n=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(t=arguments[0],r++);for(;r<n;r++)!function(r){for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t&&"[object Object]"===Object.prototype.toString.call(r[n])?e[n]=d(!0,e[n],r[n]):e[n]=r[n])}(arguments[r]);return e},f=function(e){var r=e.getAttribute("container");return t=e.parentNode,""!=r&&document.querySelector(r)&&(t=document.querySelector(r)),t},y=function(){var e=document.documentElement||document.body;return r=e.scrollHeight,(c=i.pageYOffset||e.scrollTop)/(r-e.clientHeight)},m=function(e){n=i.innerHeight,"containerVisibility"==o.basePercentageOn&&(r=e.container.scrollHeight,c=n-e.container.getBoundingClientRect().top,a=c/r),"pageScroll"==o.basePercentageOn&&(a=y()),a<0?a=0:a>1&&(a=1)},b=function(e){for(var t=0;t<s.length;t++)if(s[t].element==e)return s[t];return!1},x=function(){var e,t,r,n,o,i,a,c=["elementsize","containerSize"];l=document.querySelectorAll("[smooth-parallax]");for(var u=0;u<l.length;u++){e=parseFloat(l[u].getAttribute("start-movement"))||0,t=parseFloat(l[u].getAttribute("start-position-x"))||0,r=parseFloat(l[u].getAttribute("start-position-y"))||0,n=parseFloat(l[u].getAttribute("end-movement"))||1,o=parseFloat(l[u].getAttribute("end-position-x"))||0,i=parseFloat(l[u].getAttribute("end-position-y"))||0,a=l[u].getAttribute("base-size"),-1==c.indexOf(a)&&(a="elementSize");var g={element:l[u],container:f(l[u]),baseSizeOn:a,start:{percent:e,x:t,y:r},end:{percent:n,x:o,y:i},diff:{percent:n-e,x:o-t,y:i-r},target:{},current:{}};s.push(g)}},h=function(){for(var e=0;e<l.length;e++){var t,r,n=s[e];"elementSize"==n.baseSizeOn?(t=l[e].scrollWidth||parseFloat(i.getComputedStyle(l[e]).width),r=l[e].scrollHeight||parseFloat(i.getComputedStyle(l[e]).height)):"containerSize"==n.baseSizeOn&&(t=n.container.scrollWidth-(l[e].scrollWidth||parseFloat(i.getComputedStyle(l[e]).width)),r=n.container.scrollHeight-(l[e].scrollHeight||parseFloat(i.getComputedStyle(l[e]).height))),m(n),a<=n.start.percent?(n.target.x=n.start.x*t,n.target.y=n.start.y*r):a>=n.end.percent?(n.target.x=n.end.x*t,n.target.y=n.end.y*r):(n.target.x=n.start.x*t+n.diff.x*(a-n.start.percent)/n.diff.percent*t,n.target.y=n.start.y*r+n.diff.y*(a-n.start.percent)/n.diff.percent*r),n.current.x&&n.current.y?(n.current.x=n.current.x+.1*(n.target.x-n.current.x),n.current.y=n.current.y+.1*(n.target.y-n.current.y)):(n.current.x=n.target.x,n.current.y=n.target.y),n.current.x=parseFloat(n.current.x.toFixed(o.decimalPrecision)),n.current.y=parseFloat(n.current.y.toFixed(o.decimalPrecision)),l[e].style.transform="translate3d("+n.current.x+"px, "+n.current.y+"px, 0)"}},S=function(){h(),requestAnimationFrame(S)},v=function(){var e=!0;return-1==u.indexOf(o.basePercentageOn)&&(e=!1,console.error("Value not supported for setting basePercentageOn: "+o.basePercentageOn)),e};return g.init=function(e){(o=d(p,e||{})).decimalPrecision=parseInt(o.decimalPrecision)||p.decimalPrecision,v()&&(x(),S())},g.getScrollPercent=function(e){if(void 0==e)return y();var t=document.querySelector(e);if(null==t)return!1;var r=b(t);return!!r&&(m(r),a)},g});

package.json

 {
   "name": "smooth-parallax",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Parallax that doesn't suck! No jQuery required, just plain 'ol javascript. Smooth Parallax makes it easy to move objects when you scroll, being it images, divs or what-have-you.",
@@ -5,0 +5,0 @@ "main": "dist/smooth-parallax.js",

README.md

@@ -103,2 +103,13 @@ # Smooth Parallax
 
+__1.1.2__
+
+- Improvement: Extend public method `getScrollPercent` to return scroll percentage for elements.
+- Fix: issue calculating element's size for SVG on Firefox
+- Fix: position calculation to 2 decimals precision for better performance.
+- Fix: scroll percent calculation based on `containerSize`.
+
+__1.1.1__
+
+- Fix npm package.json info.
+
 __1.1.0__
@@ -105,0 +116,0 @@

src/smooth-parallax-src.js

 /**
- * SmoothParallax 1.1.0
+ * SmoothParallax 1.1.2
  * 
@@ -15,3 +15,3 @@ * File smooth-parallax.js.
  * Author: Diego Versiani
- * Contact: http://diegoversiani.me
+ * Contact: https://diegoversiani.me/
  * 
@@ -51,2 +51,3 @@ * Based on the work of:
     basePercentageOn: 'containerVisibility', // See `_basePercentageOnOptions` for more options
+    decimalPrecision: 2
   };
@@ -102,2 +103,4 @@
 
+
+
   /**
@@ -118,3 +121,18 @@ * Get movable element container
 
+
+
   /**
+   * Calculate page percent scrolled.
+   * @private
+   */
+  var calculatePageScrollPercent = function () {
+    var documentElement = document.documentElement || document.body;
+    _height = documentElement.scrollHeight;
+    _scrollOffset = window.pageYOffset || documentElement.scrollTop;
+    return _scrollOffset / ( _height - documentElement.clientHeight );
+  };
+
+
+
+  /**
    * Calculate variables used to determine elements position
@@ -129,5 +147,4 @@ * @private
       _height = positionData.container.scrollHeight;
-      _scrollHeight = _height - _viewPortHeight;
       _scrollOffset = _viewPortHeight - positionData.container.getBoundingClientRect().top;
-      _scrollPercent = _scrollOffset / _scrollHeight || 0;
+      _scrollPercent = _scrollOffset / _height;
     }
@@ -137,6 +154,3 @@
     if ( _settings.basePercentageOn == 'pageScroll' ) {
-      var documentElement = document.documentElement || document.body;
-      _height = documentElement.scrollHeight;
-      _scrollOffset = window.pageYOffset || documentElement.scrollTop;
-      _scrollPercent = _scrollOffset / ( _height - documentElement.clientHeight );
+      _scrollPercent = calculatePageScrollPercent();
     }
@@ -153,3 +167,22 @@
 
+
+
   /**
+   * Get position data object for the element.
+   * @returns {Object} Position data object for element or false if not found.
+   */
+  var getPositionDataByElement = function ( el ) {
+    for (var i = 0; i < _positions.length; i++) {
+      if ( _positions[i].element == el ) {
+        return _positions[i];
+      }
+    }
+    
+    // Return false if not found
+    return false;
+  }
+
+
+
+  /**
    * Initializes positions for each moving element.
@@ -184,2 +217,3 @@ * @private
       var elementPosition = {
+        element: _movingElements[i],
         container: getElementContainer( _movingElements[i] ),
@@ -221,9 +255,11 @@ baseSizeOn: baseSizeOn,
 
+      // Try get element's size with `scrollWidth` and `scrollHeight`
+      // otherwise use `getComputedStyle` which is more expensive
       if ( p.baseSizeOn == 'elementSize' ) {
-        baseWidth = _movingElements[i].scrollWidth;
-        baseHeight = _movingElements[i].scrollHeight;
+        baseWidth = _movingElements[i].scrollWidth || parseFloat( window.getComputedStyle( _movingElements[i] ).width );
+        baseHeight = _movingElements[i].scrollHeight || parseFloat( window.getComputedStyle( _movingElements[i] ).height );
       }
       else if ( p.baseSizeOn == 'containerSize' ) {
-        baseWidth = p.container.scrollWidth - _movingElements[i].scrollWidth;
-        baseHeight = p.container.scrollHeight - _movingElements[i].scrollHeight;
+        baseWidth = p.container.scrollWidth - (_movingElements[i].scrollWidth || parseFloat( window.getComputedStyle( _movingElements[i] ).width ) );
+        baseHeight = p.container.scrollHeight - (_movingElements[i].scrollHeight  || parseFloat( window.getComputedStyle( _movingElements[i] ).height ) );
       }
@@ -258,2 +294,7 @@
 
+      // Round to decimal precision to prevent
+      // too many calculation trips
+      p.current.x = parseFloat( p.current.x.toFixed( _settings.decimalPrecision ) );
+      p.current.y = parseFloat( p.current.y.toFixed( _settings.decimalPrecision ) );
+
       // update element style
@@ -298,2 +339,3 @@ _movingElements[i].style.transform = 'translate3d(' + p.current.x + 'px, ' + p.current.y + 'px, 0)';
     _settings = extend( defaults, options || {} );
+    _settings.decimalPrecision = parseInt( _settings.decimalPrecision ) || defaults.decimalPrecision;
 
@@ -309,6 +351,26 @@ // Bail early if not supported
   /**
-   * Exposes scroll percentage
+   * Get scroll percentage for the element or page.
+   * @param {string} el Target element css selector.
+   * @return {float} Scroll percentage for the element or the page.
    */
-  publicMethods.getScrollPercent = function () {
-    return _scrollPercent;
+  publicMethods.getScrollPercent = function ( selector ) {
+    // Calculate page scroll if no selector was passed
+    if ( selector == undefined ) {
+      return calculatePageScrollPercent();
+    }
+
+    // Find element
+    // Return false if not found
+    var el = document.querySelector( selector );
+    if ( el == null ) return false;
+
+    // Calculate element scroll percent
+    var positionData = getPositionDataByElement( el );
+    if ( positionData ) {
+      calculatePercent( positionData );
+      return _scrollPercent;
+    }
+
+    // Return false otherwise
+    return false;
   };
@@ -315,0 +377,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

36962

increased by15.13%

Lines of code

696

increased by14.85%

Number of lines in readme file

144

increased by8.27%

Worsened metrics

Number of package files

9

decreased by-10%

No dependency changes