Add min_width & min_height params and minor cleanup

.gitignore

@@ -1 +1,2 @@
 /node_modules/
+package-lock.json

Gruntfile.js

@@ -1,6 +1,6 @@
 'use strict';
 
-module.exports = function (grunt) {
+module.exports = function(grunt) {
 
   // Project configuration.
   grunt.initConfig({
@@ -41,7 +41,15 @@ module.exports = function (grunt) {
       }
     },
     qunit: {
-      files: ['test/**/*.html']
+      files: ['test/**/*.html'],
+      options: {
+        page: {
+          viewportSize: {
+            width: 1024,
+            height: 768
+          }
+        }
+      }
     },
     jshint: {
       options: {
@@ -79,16 +87,16 @@ module.exports = function (grunt) {
         fields: ['title', 'description', 'version', 'homepage', 'keywords', 'dependencies']
       }
     }
-    
+
   });
-  
-  grunt.registerTask('updatejson', function () {
+
+  grunt.registerTask('updatejson', function() {
     // set config vars
     var options = this.options();
-    if(typeof(options.dest) === 'string') {
+    if (typeof(options.dest) === 'string') {
       options.dest = [options.dest];
     }
-    
+
     // check that all files exist
     var files = (JSON.parse(JSON.stringify(options.dest)));
     files.push(options.src);
@@ -98,18 +106,18 @@ module.exports = function (grunt) {
         return false;
       }
     }
-    
+
     // read source data
     grunt.log.writeln("Reading from " + options.src);
     var src = grunt.file.readJSON(options.src);
-    
+
     // update destination files
     for (d = 0; d < options.dest.length; d++) {
       var data = grunt.file.readJSON(options.dest[d]);
       for (var f = 0; f < options.fields.length; f++) {
         var field = options.fields[f];
-        if(typeof(data[field]) !== 'undefined') {
-            data[field] = src[field];
+        if (typeof(data[field]) !== 'undefined') {
+          data[field] = src[field];
         }
       }
       grunt.file.write(options.dest[d], JSON.stringify(data, options.indent, 2));
@@ -129,4 +137,4 @@ module.exports = function (grunt) {
   grunt.registerTask('test', ['connect', 'jshint', 'qunit']);
   grunt.registerTask('build', ['clean', 'concat', 'uglify', 'updatejson']);
   grunt.registerTask('default', ['test', 'build']);
-};
+};

README.md

@@ -17,7 +17,7 @@ The easiest way to get up and running is to load jQuery Smoove from [cdnjs](http
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.9/jquery.smoove.min.js"></script>
 ```
 
-### Install with Bower 
+### Install with Bower
 
 Use the following command to install jQuery Smoove using [bower](https://github.com/twitter/bower).
 
@@ -33,7 +33,7 @@ Or simply add `jquery-smoove` to your project's `bower.json`.
   }
 ```
 
-### Download 
+### Download
 
 You can also just download the latest package.
 
@@ -73,6 +73,9 @@ Also note that when defining parameters via data-attributes, CamelCase names are
 
 | Name      | Type | Default | Description |
 |-----------|------|---------|-------------|
+| `min_width`  | integer  | 768 | Disable smoove on screens with less pixel width. |
+| `min_height`  | integer  | none | Disable smoove on screens with less pixel height. |
+| `offset`  | integer or string  | 150 | Distance to the bottom of the screen before object glides into view e.g. `10%`. |
 | `offset`  | integer or string  | 150 | Distance to the bottom of the screen before object glides into view e.g. `10%`. |
 | `opacity` | integer (0-100) | 0 | The opacity of the object before it comes into view. |
 | `perspective` | integer | 1000 | 3D perspective in pixels. |
@@ -95,7 +98,7 @@ Also note that when defining parameters via data-attributes, CamelCase names are
 | `skew`    | angle | none | 2D skew along X- and the Y-axis (e.g. `90deg,90deg`). |
 | `skewX`   | angle | none | 2D skew along X-axis e.g. `90deg`. |
 | `skewY`   | angle | none | 2D skew along Y-axis e.g. `90deg`. |
- 
+
 
 ## Demo
 

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "jquery-smoove",
   "description": "A simple jQuery plugin for sexy scrolling effects using CSS3 transitions and transforms.",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "main": "dist/jquery.smoove.js",
   "homepage": "http://smoove.js.org/",
   "authors": [

dist/jquery.smoove.js

@@ -1,149 +1,160 @@
 /*!
-* jQuery Smoove v0.2.9 (http://smoove.js.org/)
-* Copyright (c) 2016 Adam Bouqdib
+* jQuery Smoove v0.2.10 (http://smoove.js.org/)
+* Copyright (c) 2017 Adam Bouqdib
 * Licensed under GPL-2.0 (http://abemedia.co.uk/license) 
 */
 
-(function ($, window, document){
+(function($, window, document) {
 
   // function for adding vendor prefixes
   function crossBrowser(property, value, prefix) {
-  
+
     function ucase(string) {
       return string.charAt(0).toUpperCase() + string.slice(1);
     }
-    
-    var vendor = ['webkit','moz','ms','o'],
+
+    var vendor = ['webkit', 'moz', 'ms', 'o'],
       properties = {};
-      
-    for(var i = 0; i < vendor.length; i++) {
-      if(prefix) {
+
+    for (var i = 0; i < vendor.length; i++) {
+      if (prefix) {
         value = value.replace(prefix, '-' + vendor[i] + '-' + prefix);
       }
       properties[ucase(vendor[i]) + ucase(property)] = value;
     }
     properties[property] = value;
-    
+
     return properties;
   }
-    
+
   function smooveIt(direction) {
-    for(var i = 0; i < $.fn.smoove.items.length; i++) {
+    var height = $(window).height(),
+      width = $(window).width();
+
+    for (var i = 0; i < $.fn.smoove.items.length; i++) {
       var $item = $.fn.smoove.items[i],
-          params = $item.params,
-          height = $(window).height(),
-          // if direction isn't set, set offset to 0 to avoid hiding objects that are above the fold
-          offset = (!direction || direction === 'down' && $item.css('opacity') === '1') ? 0 : params.offset,
-          itemtop = $(window).scrollTop() + height - $item.data('top');
-        
+        params = $item.params;
+
+      // disable smoove on small screens
+      if (params.min_width > width || params.min_height > height) {
+        return false;
+      }
+
+      // if direction isn't set, set offset to 0 to avoid hiding objects that are above the fold
+      var offset = (!direction || direction === 'down' && $item.css('opacity') === '1') ? 0 : params.offset,
+        itemtop = $(window).scrollTop() + height - $item.data('top');
+
       // offset in %
-      if(typeof offset === 'string' && offset.indexOf('%')) {
+      if (typeof offset === 'string' && offset.indexOf('%')) {
         offset = parseInt(offset) / 100 * height;
       }
-      
-      if(itemtop < offset) {
-        if(params.opacity !== false) {
-          $item.css({opacity: params.opacity});
+
+      if (itemtop < offset) {
+        if (params.opacity !== false) {
+          $item.css({
+            opacity: params.opacity
+          });
         }
-        
+
         var transforms = [],
-            properties = ['move','move3D','moveX','moveY','moveZ','rotate','rotate3d','rotateX','rotateY','rotateZ','scale','scale3d','scaleX','scaleY','skew','skewX','skewY'];
-          
-        for(var p = 0; p < properties.length; p++) {
-          if(typeof params[properties[p]] !== "undefined") {
+          properties = ['move', 'move3D', 'moveX', 'moveY', 'moveZ', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d', 'scaleX', 'scaleY', 'skew', 'skewX', 'skewY'];
+
+        for (var p = 0; p < properties.length; p++) {
+          if (typeof params[properties[p]] !== "undefined") {
             transforms[properties[p]] = params[properties[p]];
           }
         }
-        
+
         var transform = '';
-        for(var t in transforms) {
+        for (var t in transforms) {
           transform += t.replace('move', 'translate') + '(' + transforms[t] + ') ';
         }
-        if(transform) {
+        if (transform) {
           $item.css(crossBrowser('transform', transform));
           $item.parent().css(crossBrowser('perspective', params.perspective));
           //$item.parent().css(crossBrowser('transformStyle', params.transformstyle));
-        
-          if(params.transformOrigin) {
+
+          if (params.transformOrigin) {
             $item.css(crossBrowser('transformOrigin', params.transformOrigin));
           }
         }
-      }
-      else {
+      } else {
         $item.css('opacity', 1).css(crossBrowser('transform', ''));
       }
     }
   }
-  
-  $.fn.smoove = function (options){
+
+  $.fn.smoove = function(options) {
     $.fn.smoove.init(this, $.extend({}, $.fn.smoove.defaults, options));
     return this;
   };
-  
+
   $.fn.smoove.items = [];
   $.fn.smoove.loaded = false;
-  
+
   $.fn.smoove.defaults = {
     offset: 150,
     opacity: 0,
     transition: "all 1s ease, opacity 1.5s ease",
     transformStyle: 'preserve-3d',
     transformOrigin: false,
-    perspective: 1000
+    perspective: 1000,
+    min_width: 768,
+    min_height: false
   };
 
-  $.fn.smoove.init = function (items, settings){
+  $.fn.smoove.init = function(items, settings) {
     items.each(function() {
       var $item = $(this),
-          params = $item.params = $.extend({}, settings, $item.data());
-        
+        params = $item.params = $.extend({}, settings, $item.data());
+
       $item.params.opacity = $item.params.opacity / 100;
       $item.data('top', $item.offset().top);
-        
+
       params.transition = crossBrowser('transition', params.transition, 'transform');
       $item.css(params.transition);
-      
+
       $.fn.smoove.items.push($item);
     });
-    
+
     // add event handlers
-    if(!$.fn.smoove.loaded) {
+    if (!$.fn.smoove.loaded) {
       $.fn.smoove.loaded = true;
-      
+
       var didScroll = false,
-          oldScroll = 0,
-          oldHeight = $(window).height(),
-          oldWidth = $(window).width(),
-          oldDocHeight = $(document).height(),
-          resizing;
-    
+        oldScroll = 0,
+        oldHeight = $(window).height(),
+        oldWidth = $(window).width(),
+        oldDocHeight = $(document).height(),
+        resizing;
+
       // naughty way of avoiding vertical scrollbars when items slide in/out from the side
-      if($('body').width() === $(window).width()) {
-        $('body').css('overflow-x','hidden');
+      if ($('body').width() === $(window).width()) {
+        $('body').css('overflow-x', 'hidden');
       }
-        
+
       $(window).resize(function() {
         clearTimeout(resizing);
         resizing = setTimeout(function() {
           var height = $(window).height(),
-              width = $(window).width(),
-              direction = (oldHeight > height) ? direction = 'up' : 'down',
-              items = $.fn.smoove.items;
-          
+            width = $(window).width(),
+            direction = (oldHeight > height) ? direction = 'up' : 'down',
+            items = $.fn.smoove.items;
+
           oldHeight = height;
-          
+
           // responsive support - reassign position values on resize
-          if(oldWidth !== width) {
-            for(var i = 0; i < items.length; i++) {
+          if (oldWidth !== width) {
+            for (var i = 0; i < items.length; i++) {
               items[i].css(crossBrowser('transform', '')).css(crossBrowser('transition', ''));
             }
-            
+
             // wait for responsive magic to finish
             var stillResizing = setInterval(function() {
               var docHeight = $(document).height();
-              if(docHeight === oldDocHeight) {
+              if (docHeight === oldDocHeight) {
                 window.clearInterval(stillResizing);
-                for(var i = 0; i < items.length; i++) {
+                for (var i = 0; i < items.length; i++) {
                   items[i].data('top', items[i].offset().top);
                   items[i].css(items[i].params.transition);
                 }
@@ -151,26 +162,25 @@
               }
               oldDocHeight = docHeight;
             }, 500);
-          } 
-          else {
+          } else {
             smooveIt(direction);
           }
           oldWidth = width;
         }, 500);
       });
-      
+
       $(window).on('load', function() {
         smooveIt();
-        
+
         // throttle scroll handler
         $(window).scroll(function() {
           didScroll = true;
         });
         setInterval(function() {
-          if ( didScroll ) {
+          if (didScroll) {
             didScroll = false;
             var scrolltop = $(window).scrollTop(),
-                direction = (scrolltop < oldScroll) ? direction = 'up' : 'down';
+              direction = (scrolltop < oldScroll) ? direction = 'up' : 'down';
             oldScroll = scrolltop;
             smooveIt(direction);
           }
@@ -179,4 +189,4 @@
     }
   };
 
-}( jQuery, window, document ));
+}(jQuery, window, document));

package.json

@@ -1,7 +1,7 @@
 {
   "name": "jquery-smoove",
   "title": "jQuery Smoove - Gorgeous CSS3 Scroll Effects",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "A simple jQuery plugin for sexy scrolling effects using CSS3 transitions and transforms.",
   "homepage": "http://smoove.js.org/",
   "author": "Adam Bouqdib (http://abemedia.co.uk/)",

smoove.jquery.json

@@ -1,7 +1,7 @@
 {
   "name": "smoove",
   "title": "jQuery Smoove - Gorgeous CSS3 Scroll Effects",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "A simple jQuery plugin for sexy scrolling effects using CSS3 transitions and transforms.",
   "homepage": "http://smoove.js.org/",
   "author": {
@@ -35,4 +35,4 @@
     "css",
     "animation"
   ]
-}
+}

src/jquery.smoove.js

@@ -1,144 +1,155 @@
-/* jQuery Smoove | (c) 2014-2016 Adam Bouqdib | abemedia.co.uk/license */
-(function ($, window, document){
+/* jQuery Smoove | (c) 2014-2017 Adam Bouqdib | abemedia.co.uk/license */
+(function($, window, document) {
 
   // function for adding vendor prefixes
   function crossBrowser(property, value, prefix) {
-  
+
     function ucase(string) {
       return string.charAt(0).toUpperCase() + string.slice(1);
     }
-    
-    var vendor = ['webkit','moz','ms','o'],
+
+    var vendor = ['webkit', 'moz', 'ms', 'o'],
       properties = {};
-      
-    for(var i = 0; i < vendor.length; i++) {
-      if(prefix) {
+
+    for (var i = 0; i < vendor.length; i++) {
+      if (prefix) {
         value = value.replace(prefix, '-' + vendor[i] + '-' + prefix);
       }
       properties[ucase(vendor[i]) + ucase(property)] = value;
     }
     properties[property] = value;
-    
+
     return properties;
   }
-    
+
   function smooveIt(direction) {
-    for(var i = 0; i < $.fn.smoove.items.length; i++) {
+    var height = $(window).height(),
+      width = $(window).width();
+
+    for (var i = 0; i < $.fn.smoove.items.length; i++) {
       var $item = $.fn.smoove.items[i],
-          params = $item.params,
-          height = $(window).height(),
-          // if direction isn't set, set offset to 0 to avoid hiding objects that are above the fold
-          offset = (!direction || direction === 'down' && $item.css('opacity') === '1') ? 0 : params.offset,
-          itemtop = $(window).scrollTop() + height - $item.data('top');
-        
+        params = $item.params;
+
+      // disable smoove on small screens
+      if (params.min_width > width || params.min_height > height) {
+        return false;
+      }
+
+      // if direction isn't set, set offset to 0 to avoid hiding objects that are above the fold
+      var offset = (!direction || direction === 'down' && $item.css('opacity') === '1') ? 0 : params.offset,
+        itemtop = $(window).scrollTop() + height - $item.data('top');
+
       // offset in %
-      if(typeof offset === 'string' && offset.indexOf('%')) {
+      if (typeof offset === 'string' && offset.indexOf('%')) {
         offset = parseInt(offset) / 100 * height;
       }
-      
-      if(itemtop < offset) {
-        if(params.opacity !== false) {
-          $item.css({opacity: params.opacity});
+
+      if (itemtop < offset) {
+        if (params.opacity !== false) {
+          $item.css({
+            opacity: params.opacity
+          });
         }
-        
+
         var transforms = [],
-            properties = ['move','move3D','moveX','moveY','moveZ','rotate','rotate3d','rotateX','rotateY','rotateZ','scale','scale3d','scaleX','scaleY','skew','skewX','skewY'];
-          
-        for(var p = 0; p < properties.length; p++) {
-          if(typeof params[properties[p]] !== "undefined") {
+          properties = ['move', 'move3D', 'moveX', 'moveY', 'moveZ', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d', 'scaleX', 'scaleY', 'skew', 'skewX', 'skewY'];
+
+        for (var p = 0; p < properties.length; p++) {
+          if (typeof params[properties[p]] !== "undefined") {
             transforms[properties[p]] = params[properties[p]];
           }
         }
-        
+
         var transform = '';
-        for(var t in transforms) {
+        for (var t in transforms) {
           transform += t.replace('move', 'translate') + '(' + transforms[t] + ') ';
         }
-        if(transform) {
+        if (transform) {
           $item.css(crossBrowser('transform', transform));
           $item.parent().css(crossBrowser('perspective', params.perspective));
           //$item.parent().css(crossBrowser('transformStyle', params.transformstyle));
-        
-          if(params.transformOrigin) {
+
+          if (params.transformOrigin) {
             $item.css(crossBrowser('transformOrigin', params.transformOrigin));
           }
         }
-      }
-      else {
+      } else {
         $item.css('opacity', 1).css(crossBrowser('transform', ''));
       }
     }
   }
-  
-  $.fn.smoove = function (options){
+
+  $.fn.smoove = function(options) {
     $.fn.smoove.init(this, $.extend({}, $.fn.smoove.defaults, options));
     return this;
   };
-  
+
   $.fn.smoove.items = [];
   $.fn.smoove.loaded = false;
-  
+
   $.fn.smoove.defaults = {
     offset: 150,
     opacity: 0,
     transition: "all 1s ease, opacity 1.5s ease",
     transformStyle: 'preserve-3d',
     transformOrigin: false,
-    perspective: 1000
+    perspective: 1000,
+    min_width: 768,
+    min_height: false
   };
 
-  $.fn.smoove.init = function (items, settings){
+  $.fn.smoove.init = function(items, settings) {
     items.each(function() {
       var $item = $(this),
-          params = $item.params = $.extend({}, settings, $item.data());
-        
+        params = $item.params = $.extend({}, settings, $item.data());
+
       $item.params.opacity = $item.params.opacity / 100;
       $item.data('top', $item.offset().top);
-        
+
       params.transition = crossBrowser('transition', params.transition, 'transform');
       $item.css(params.transition);
-      
+
       $.fn.smoove.items.push($item);
     });
-    
+
     // add event handlers
-    if(!$.fn.smoove.loaded) {
+    if (!$.fn.smoove.loaded) {
       $.fn.smoove.loaded = true;
-      
+
       var didScroll = false,
-          oldScroll = 0,
-          oldHeight = $(window).height(),
-          oldWidth = $(window).width(),
-          oldDocHeight = $(document).height(),
-          resizing;
-    
+        oldScroll = 0,
+        oldHeight = $(window).height(),
+        oldWidth = $(window).width(),
+        oldDocHeight = $(document).height(),
+        resizing;
+
       // naughty way of avoiding vertical scrollbars when items slide in/out from the side
-      if($('body').width() === $(window).width()) {
-        $('body').css('overflow-x','hidden');
+      if ($('body').width() === $(window).width()) {
+        $('body').css('overflow-x', 'hidden');
       }
-        
+
       $(window).resize(function() {
         clearTimeout(resizing);
         resizing = setTimeout(function() {
           var height = $(window).height(),
-              width = $(window).width(),
-              direction = (oldHeight > height) ? direction = 'up' : 'down',
-              items = $.fn.smoove.items;
-          
+            width = $(window).width(),
+            direction = (oldHeight > height) ? direction = 'up' : 'down',
+            items = $.fn.smoove.items;
+
           oldHeight = height;
-          
+
           // responsive support - reassign position values on resize
-          if(oldWidth !== width) {
-            for(var i = 0; i < items.length; i++) {
+          if (oldWidth !== width) {
+            for (var i = 0; i < items.length; i++) {
               items[i].css(crossBrowser('transform', '')).css(crossBrowser('transition', ''));
             }
-            
+
             // wait for responsive magic to finish
             var stillResizing = setInterval(function() {
               var docHeight = $(document).height();
-              if(docHeight === oldDocHeight) {
+              if (docHeight === oldDocHeight) {
                 window.clearInterval(stillResizing);
-                for(var i = 0; i < items.length; i++) {
+                for (var i = 0; i < items.length; i++) {
                   items[i].data('top', items[i].offset().top);
                   items[i].css(items[i].params.transition);
                 }
@@ -146,26 +157,25 @@
               }
               oldDocHeight = docHeight;
             }, 500);
-          } 
-          else {
+          } else {
             smooveIt(direction);
           }
           oldWidth = width;
         }, 500);
       });
-      
+
       $(window).on('load', function() {
         smooveIt();
-        
+
         // throttle scroll handler
         $(window).scroll(function() {
           didScroll = true;
         });
         setInterval(function() {
-          if ( didScroll ) {
+          if (didScroll) {
             didScroll = false;
             var scrolltop = $(window).scrollTop(),
-                direction = (scrolltop < oldScroll) ? direction = 'up' : 'down';
+              direction = (scrolltop < oldScroll) ? direction = 'up' : 'down';
             oldScroll = scrolltop;
             smooveIt(direction);
           }
@@ -174,4 +184,4 @@
     }
   };
 
-}( jQuery, window, document ));
+}(jQuery, window, document));