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));