From 4d97a755561a909cf288b56c2e86c909b3d603b2 Mon Sep 17 00:00:00 2001 From: Adam Bouqdib Date: Thu, 6 Jul 2017 18:05:35 +0100 Subject: [PATCH] Add min_width & min_height params and minor cleanup --- .gitignore | 1 + Gruntfile.js | 32 +++++--- README.md | 9 ++- bower.json | 2 +- dist/jquery.smoove.js | 158 ++++++++++++++++++++------------------ dist/jquery.smoove.min.js | 7 +- package.json | 2 +- smoove.jquery.json | 4 +- src/jquery.smoove.js | 156 +++++++++++++++++++------------------ 9 files changed, 202 insertions(+), 169 deletions(-) diff --git a/.gitignore b/.gitignore index 2ccbe46..4ef133f 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ /node_modules/ +package-lock.json diff --git a/Gruntfile.js b/Gruntfile.js index b73a18f..da7cf26 100644 --- a/Gruntfile.js +++ b/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']); -}; \ No newline at end of file +}; diff --git a/README.md b/README.md index 539c4e5..9349118 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ The easiest way to get up and running is to load jQuery Smoove from [cdnjs](http ``` -### 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 diff --git a/bower.json b/bower.json index 78a1913..c4840c2 100644 --- a/bower.json +++ b/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": [ diff --git a/dist/jquery.smoove.js b/dist/jquery.smoove.js index 18f3996..58927eb 100644 --- a/dist/jquery.smoove.js +++ b/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)); diff --git a/dist/jquery.smoove.min.js b/dist/jquery.smoove.min.js index ce664da..bfb956a 100644 --- a/dist/jquery.smoove.min.js +++ b/dist/jquery.smoove.min.js @@ -1,7 +1,8 @@ /*! -* 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(a,b,c){function d(a,b,c){function d(a){return a.charAt(0).toUpperCase()+a.slice(1)}for(var e=["webkit","moz","ms","o"],f={},g=0;gf?h="up":"down",i=a.fn.smoove.items;if(k=f,l!==g){for(var j=0;jf||i.min_height>e)return!1;var j=!c||"down"===c&&"1"===h.css("opacity")?0:i.offset,k=a(b).scrollTop()+e-h.data("top");if("string"==typeof j&&j.indexOf("%")&&(j=parseInt(j)/100*e),kf?h="up":"down",i=a.fn.smoove.items;if(k=f,l!==g){for(var j=0;j 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));