tilt.js - npm Package Compare versions

Comparing version 1.1.17 to 1.1.19

dest/tilt.jquery.js

@@ -19,5 +19,7 @@ 'use strict';
         var bindEvents = function bindEvents() {
+            var _this = this;
             $(this).on('mousemove', mouseMove);
             $(this).on('mouseenter', mouseEnter);
             if (this.settings.reset) $(this).on('mouseleave', mouseLeave);
+            if (this.settings.glare) $(window).on('resize', updateGlareSize.bind(_this));
         };
@@ -29,3 +31,3 @@
         var setTransition = function setTransition() {
-            var _this = this;
+            var _this2 = this;
 
@@ -36,4 +38,4 @@ if (this.timeout !== undefined) clearTimeout(this.timeout);
             this.timeout = setTimeout(function () {
-                $(_this).css({ 'transition': '' });
-                if (_this.settings.glare) _this.glareElement.css({ 'transition': '' });
+                $(_this2).css({ 'transition': '' });
+                if (_this2.settings.glare) _this2.glareElement.css({ 'transition': '' });
             }, this.settings.speed);
@@ -181,3 +183,2 @@ };
                 'background-image': 'linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)',
-                'opacity': '' + this.settings.maxGlare / 2,
                 'width': '' + $(this).outerWidth() * 2,
@@ -192,2 +193,12 @@ 'height': '' + $(this).outerWidth() * 2,
         /**
+         * Update glare on resize
+         */
+        var updateGlareSize = function updateGlareSize() {
+            this.glareElement.css({
+                'width': '' + $(this).outerWidth() * 2,
+                'height': '' + $(this).outerWidth() * 2
+            });
+        };
+
+        /**
          * Public methods
@@ -214,3 +225,3 @@ */
             $(this).each(function () {
-                var _this2 = this;
+                var _this3 = this;
 
@@ -221,3 +232,3 @@ this.mousePositions = getMousePositions.call(this);
                 setTimeout(function () {
-                    _this2.reset = false;
+                    _this3.reset = false;
                 }, this.settings.transition);
@@ -231,3 +242,3 @@ });
         return this.each(function () {
-            var _this3 = this;
+            var _this4 = this;
 
@@ -254,9 +265,9 @@ /**
                 // Store settings
-                $(_this3).data('settings', _this3.settings);
+                $(_this4).data('settings', _this4.settings);
 
                 // Prepare element
-                if (_this3.settings.glare) prepareGlare.call(_this3);
+                if (_this4.settings.glare) prepareGlare.call(_this4);
 
                 // Bind events
-                bindEvents.call(_this3);
+                bindEvents.call(_this4);
             };
@@ -263,0 +274,0 @@

gulp/config.js

@@ -0,0 +0,0 @@ /**

gulp/tasks/browsersync.js

@@ -0,0 +0,0 @@ /* BrowserSync task */

gulp/tasks/build.js

@@ -12,3 +12,3 @@ /* default task */
 gulp.task('build', [
-  'scss', 'transpile', 'compress'
+  'scss', 'transpile', 'compress', 'test'
 ]);

gulp/tasks/default.js

@@ -0,0 +0,0 @@ /* default task */

gulp/tasks/js.js

@@ -0,0 +0,0 @@ /* JS task */

gulp/tasks/scss.js

@@ -0,0 +0,0 @@ /* SCSS task */

gulp/tasks/tests.js

@@ -0,0 +0,0 @@ /* SCSS task */

gulp/tasks/watch.js

@@ -0,0 +0,0 @@ /* Watch task */

package.json

 {
   "name": "tilt.js",
-  "version": "1.1.17",
+  "version": "1.1.19",
   "description": "A tiny requestAnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery.",
@@ -5,0 +5,0 @@ "main": "./src/tilt.jquery.js",

readme.md

@@ -63,5 +63,6 @@ [![Build Status](https://travis-ci.org/gijsroge/tilt.js.svg?branch=master)](https://travis-ci.org/gijsroge/tilt.js)
 ### CDN
-- https://unpkg.com/tilt.js@1.1.13/dest/tilt.jquery.min.js
+- https://unpkg.com/tilt.js@1.1.19/dest/tilt.jquery.min.js
 
 ### Alternatives
-- **Vanilla JS version:** https://github.com/micku7zu/vanilla-tilt.js
+- **Vanilla JS:** https://github.com/micku7zu/vanilla-tilt.js
+- **React:** https://github.com/jonathandion/react-tilt

src/tilt.jquery.js

@@ -17,5 +17,7 @@ (function ($) {
         const bindEvents = function() {
+            const _this = this;
             $(this).on('mousemove', mouseMove);
             $(this).on('mouseenter', mouseEnter);
             if (this.settings.reset) $(this).on('mouseleave', mouseLeave);
+            if (this.settings.glare) $(window).on('resize', updateGlareSize.bind(_this));
         };
@@ -175,3 +177,2 @@
                 'background-image': `linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)`,
-                'opacity': `${this.settings.maxGlare / 2}`,
                 'width': `${$(this).outerWidth()*2}`,
@@ -187,2 +188,12 @@ 'height': `${$(this).outerWidth()*2}`,
         /**
+         * Update glare on resize
+         */
+        const updateGlareSize = function () {
+            this.glareElement.css({
+                'width': `${$(this).outerWidth()*2}`,
+                'height': `${$(this).outerWidth()*2}`,
+            });
+        };
+
+        /**
          * Public methods
@@ -189,0 +200,0 @@ */

tests/tests.js

@@ -0,0 +0,0 @@ /**

No alert changes

Improved metrics

Total package byte prevSize

120905

29.66%

Number of lines in readme file

68

1.49%

Worsened metrics

Number of package files

25

-24.24%

Lines of code

703

-2.5%

No dependency changes