diff --git a/grunt.js b/Gruntfile.js similarity index 57% rename from grunt.js rename to Gruntfile.js index 6dd16fc..c3b8a01 100644 --- a/grunt.js +++ b/Gruntfile.js @@ -6,10 +6,11 @@ module.exports = function(grunt) { 'source/jarallax_counter.js', 'source/jarallax_object.js', 'source/jarallax_animation.js', - 'source/controllers/*.js'] + 'source/controllers/*.js', + 'import/*/*.js'] grunt.initConfig({ - pkg: '', + pkg: grunt.file.readJSON('package.json'), meta: { banner: '/*!\n' + ' * <%= pkg.name %>\n' + @@ -21,18 +22,31 @@ module.exports = function(grunt) { ' * <%= pkg.license.url%>\n' + ' * \n' + ' * Date: <%= grunt.template.today("dd mmm yyyy") %>\n' + - ' */' + ' */\n\n' }, - lint: { + jshint: { files: ['source/*.js', 'source/controllers/*.js'] }, concat: { + options: { + banner: '/*!\n' + + ' * <%= pkg.name %>\n' + + ' * Version: <%= pkg.version %>\n' + + ' * website: <%= pkg.website %>\n' + + ' *\n' + + ' * Copyright <%= grunt.template.today("yyyy") %>, <%= pkg.author %>\n' + + ' * <%= pkg.license.type%>\n' + + ' * <%= pkg.license.url%>\n' + + ' * \n' + + ' * Date: <%= grunt.template.today("dd mmm yyyy") %>\n' + + ' */\n\n' + }, dist: { src: files, dest: '<%= pkg.destination %><%= pkg.file_name %>-<%= pkg.version %>.js' } }, - min: { + uglify: { dist: { src: files, dest: '<%= pkg.destination %><%= pkg.file_name %>-<%= pkg.version %>.min.js' @@ -40,5 +54,8 @@ module.exports = function(grunt) { } }); - grunt.registerTask('default', 'lint concat min'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-concat'); + grunt.loadNpmTasks('grunt-contrib-jshint') + grunt.registerTask('default', ['jshint', 'concat', 'uglify']); }; diff --git a/import/jquery-rotate/jquery-rotate.js b/import/jquery-rotate/jquery-rotate.js new file mode 100644 index 0000000..c97583e --- /dev/null +++ b/import/jquery-rotate/jquery-rotate.js @@ -0,0 +1,313 @@ +// VERSION: 2.2 LAST UPDATE: 13.03.2012 +/* + * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php + * + * Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009 + * Website: http://code.google.com/p/jqueryrotate/ + */ + +// Documentation removed from script file (was kinda useless and outdated) + +(function($) { +var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" "); +for (var a=0;a this._parameters.duration; + + // TODO: Bug for animatedGif for static rotation ? (to test) + if (checkEnd && !this._parameters.animatedGif) + { + clearTimeout(this._timer); + } + else + { + if (this._canvas||this._vimage||this._img) { + var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration); + this._rotate((~~(angle*10))/10); + } + if (this._parameters.step) { + this._parameters.step(this._angle); + } + var self = this; + this._timer = setTimeout(function() + { + self._animate.call(self); + }, 10); + } + + // To fix Bug that prevents using recursive function in callback I moved this function to back + if (this._parameters.callback && checkEnd){ + this._angle = this._parameters.animateTo; + this._rotate(this._angle); + this._parameters.callback.call(this._rootObj); + } + }, + + _rotate : (function() + { + var rad = Math.PI/180; + if (IE) + return function(angle) + { + this._angle = angle; + this._container.style.rotation=(angle%360)+"deg"; + } + else if (supportedCSS) + return function(angle){ + this._angle = angle; + this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)"; + } + else + return function(angle) + { + this._angle = angle; + angle=(angle%360)* rad; + // clear canvas + this._canvas.width = this._width+this._widthAdd; + this._canvas.height = this._height+this._heightAdd; + + // REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate.. + this._cnv.translate(this._widthAddHalf,this._heightAddHalf); // at least center image on screen + this._cnv.translate(this._widthHalf,this._heightHalf); // we move image back to its orginal + this._cnv.rotate(angle); // rotate image + this._cnv.translate(-this._widthHalf,-this._heightHalf); // move image to its center, so we can rotate around its center + this._cnv.scale(this._aspectW,this._aspectH); // SCALE - if needed ;) + this._cnv.drawImage(this._img, 0, 0); // First - we draw image + } + + })() +} + +if (IE) +{ +Wilq32.PhotoEffect.prototype.createVMLNode=(function(){ +document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)"); + try { + !document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml"); + return function (tagName) { + return document.createElement(''); + }; + } catch (e) { + return function (tagName) { + return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">'); + }; + } +})(); +} + +})(jQuery); diff --git a/import/scroll-converter/LICENSE-MIT b/import/scroll-converter/LICENSE-MIT new file mode 100644 index 0000000..d8dfd81 --- /dev/null +++ b/import/scroll-converter/LICENSE-MIT @@ -0,0 +1,19 @@ +Copyright (c) 2011 Johannes Koggdal (created while working at BombayWorks) + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/import/scroll-converter/README.md b/import/scroll-converter/README.md new file mode 100644 index 0000000..dfd8969 --- /dev/null +++ b/import/scroll-converter/README.md @@ -0,0 +1,65 @@ +# Scroll Converter + +This script converts vertical scrolling to horizontal scrolling. Most mouses only have a scroll wheel for vertical scrolling, which makes it difficult to scroll horizontally on a website. If you have a site where you want to be able to scroll vertically using the scroll wheel (or trackpad) to scroll the content horizontally, this is the script for you! + + + + +## How it works + + +The script listens for changes of the mouse wheel data, and updates the horizontal scroll value based on that. Sometimes the browser uses scrolling with easing, which is also transferred correctly. It will not perform exactly as normal scrolling, but it works good enough. + + +### Browser differences + +While developing this I noticed big differences between browsers. It is very difficult to get this perfect in all browsers, so what I have tried is getting it fairly good in all browsers. + +There are two properties in the event object where you can capture the wheel data: `wheelDelta` and `detail`. Different browsers use different properties, and give different values for the same amount of scroll. This script doesn't try to give a normalized value from these, but instead tries to normalize the experience to some degree. + +Different pointing devices will give different results. A regular scroll wheel on an average mouse scroll in steps. A nice trackpad will have much better detail. Not all browsers expose this detail though. During my testing I found that Firefox gives the same value for a regular scroll wheel and a trackpad, while Safari and Chrome give different values and more fine-grained detail for the trackpad. That means the scrolling will look much better in these browsers, when using a good trackpad. + + +### Browser support + +It works in all browsers I have tried in, including IE down to version 6. + + + +## Usage + + +### Include the script into your page + + + + +### Initialize the script +To enable the script you need to activate it. + + scrollConverter.activate(); + +The `activate` method takes a function as an optional argument, which will execute everytime the scrolling updates. The first argument of that function is the current horizontal scroll offset. + + scrollConverter.activate(function (offset) { + console.log(offset); // Logs the current horizontal scroll offset + }); + + +### Deactivation +If you later want to deactivate the conversion, you can call the `deactivate` method: + + scrollConverter.deactivate(); + +You can also deactivate all kinds off scrolling on the page, by calling this method: + + scrollConverter.deactivateAllScrolling(); + +If you want to activate the scrolling again you can just call the `activate` method again (but you can't pass a callback at this point). + + + +## License + + +This script was developed by me ([Johannes Koggdal](http://koggdal.com/)) while working at [BombayWorks](http://bombayworks.com/). We open source it under the MIT license to spread the knowledge and make it simpler for other people to make the web more awesome. \ No newline at end of file diff --git a/import/scroll-converter/scroll-converter.js b/import/scroll-converter/scroll-converter.js new file mode 100644 index 0000000..2122739 --- /dev/null +++ b/import/scroll-converter/scroll-converter.js @@ -0,0 +1,193 @@ +/* +scrollConverter 1.0 +https://github.com/koggdal/scroll-converter + +Copyright 2011 Johannes Koggdal (http://koggdal.com/) +Developed for BombayWorks (http://bombayworks.com/) + +Released under MIT license +*/ + +window.scrollConverter = (function (window, document, undefined) { + + // Private vars + var docElem = document.documentElement, + active = false, + hasDeactivated = false, + eventsBound = false; + + // Private methods + var scrollCallback = function (offset, event, callback) { + + // Abort the scrolling if it's inactive + if (!active) { + return; + } + + var delta, numPixelsPerStep, change, newOffset, + docOffset, scrollWidth, winWidth, maxOffset; + + // Set scrolling parameters + delta = 0; + numPixelsPerStep = 10; + + // Find the maximum offset for the scroll + docOffset = (docElem ? docElem.offsetWidth : 0) || 0; + scrollWidth = document.body.scrollWidth || 0; + winWidth = docElem ? docElem.clientWidth : 0; + maxOffset = Math.max(docOffset, scrollWidth) - winWidth; + + // "Normalize" the wheel value across browsers + // The delta value after this will not be the same for all browsers. + // Instead, it is normalized in a way to try to give a pretty similar feeling in all browsers. + // + // Firefox and Opera + if (event.detail) { + delta = event.detail * -240; + } + // IE, Safari and Chrome + else if (event.wheelDelta) { + delta = event.wheelDelta * 5; + } + + // Get the real offset change from the delta + // A positive change is when the user scrolled the wheel up (in regular scrolling direction) + // A negative change is when the user scrolled the wheel down + change = delta / 120 * numPixelsPerStep; + newOffset = offset.x - change; + + // Do the scroll if the new offset is positive + if (newOffset >= 0 && newOffset <= maxOffset) { + offset.x = newOffset; + offset.setByScript = true; + window.scrollTo(offset.x, offset.y); + } + // Keep the offset within the boundaries + else if (offset.x !== 0 && offset.x !== maxOffset) { + offset.x = newOffset > maxOffset ? maxOffset : 0; + offset.setByScript = true; + window.scrollTo(offset.x, offset.y); + } + + // Fire the callback + if (typeof callback === "function") { + callback(offset); + } + }, + + getOffset = function (axis) { + axis = axis.toUpperCase(); + var pageOffset = "page" + axis + "Offset", + scrollValue = "scroll" + axis, + scrollDir = "scroll" + (axis === "X" ? "Left" : "Top"); + + // Get the scroll offset for all browsers + return window[pageOffset] || window[scrollValue] || (function () { + var rootElem = document.documentElement || document.body.parentNode; + return ((typeof rootElem[scrollDir] === "number") ? rootElem : document.body)[scrollDir]; + }()); + }, + + bindEvents = function (offset, cb) { + + var callback = function (e) { + + // Fix event object for IE8 and below + e = e || window.event; + + // Trigger the scroll behavior + scrollCallback(offset, e, cb); + + // Prevent the normal scroll action to happen + if (e.preventDefault && e.stopPropagation) { + e.preventDefault(); + e.stopPropagation(); + } else { + return false; + } + }, + + updateOffsetOnScroll = function () { + + // Update the offset variable when the normal scrollbar is used + if (!offset.setByScript) { + offset.x = getOffset("x"); + offset.y = getOffset("y"); + } + offset.setByScript = false; + }; + + // Safari, Chrome, Opera, IE9+ + if (window.addEventListener) { + + // Safari, Chrome, Opera, IE9 + if ("onmousewheel" in window) { + window.addEventListener("mousewheel", callback, false); + window.addEventListener("scroll", updateOffsetOnScroll, false); + } + // Firefox + else { + window.addEventListener("DOMMouseScroll", callback, false); + window.addEventListener("scroll", updateOffsetOnScroll, false); + } + } + // IE8 and below + else { + document.attachEvent("onmousewheel", callback); + window.attachEvent("onscroll", updateOffsetOnScroll); + } + }, + + deactivateScrolling = function (e) { + e.preventDefault(); + e.stopPropagation(); + return false; + }; + + // Return a public API + return { + + // Activate the scrolling switch + // An optional callback can be passed in, which will fire at every scroll update + activate: function (callback) { + + // Set state + active = true; + + // Bind events if it hasn't been done before + if (!eventsBound) { + var offset = { x: 0, y: 0 }; + bindEvents(offset, callback); + eventsBound = true; + } + + // Remove event handlers if it was previously deactivated + if (hasDeactivated) { + if (window.addEventListener) { + window.removeEventListener("scroll", deactivateScrolling, true); + } else { + window.detachEvent("onscroll", deactivateScrolling); + } + hasDeactivated = false; + } + }, + + deactivate: function () { + active = false; + }, + + deactivateAllScrolling: function () { + + // Set state + active = false; + hasDeactivated = true; + + // Bind event handlers to disable the scroll + if (window.addEventListener) { + window.addEventListener("scroll", deactivateScrolling, true); + } else { + window.attachEvent("onscroll", deactivateScrolling); + } + } + }; +}(window, document)); \ No newline at end of file diff --git a/package.json b/package.json index 5c1e547..f39fede 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name":"Jarallax", "file_name":"jarallax", - "author":"Enter name here", + "author":"Jacko Hoogeveen", "title": "Jarallax", "description": "The parallax scrolling opensource Javascript library", - "version":"0.2.3", + "version":"0.2.4", "website": "http://jarallax.com", "destination":"bin/", "license": diff --git a/source/controllers/scroll.js b/source/controllers/scroll.js index 8d595b3..164cfdb 100644 --- a/source/controllers/scroll.js +++ b/source/controllers/scroll.js @@ -1,18 +1,22 @@ //////////////////////////////////////////////////////////////////////////////// // Scroll controller /////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////// -ControllerScroll = function(smoothing, scrollSpace) { +ControllerScroll = function(smoothing, horizontal, convertScroll) { this.target = $(window); - this.height = parseInt($("body").css('height'),10); - this.scrollSpace = scrollSpace || this.height - this.target.height(); + this.horizontal = horizontal; + this.convertScroll = convertScroll; + $(window).scrollTop(0); + $(window).scrollLeft(0); - if (this.scrollSpace < 10) { - this.height = parseInt($("#wrapper").css('height'),10); - this.scrollSpace = this.height - this.target.height(); + if (!horizontal) { + var height = parseInt($("body").css('height'),10); + this.scrollSpace = height - this.target.height(); + } else { + var width = parseInt($("body").css('width'),10); + this.scrollSpace = width - this.target.width(); } this.smoothing = smoothing || false; - this.targetProgress = 0; }; @@ -20,26 +24,44 @@ ControllerScroll.prototype = new JarallaxController(); ControllerScroll.prototype.activate = function(jarallax) { JarallaxController.prototype.activate.call(this, jarallax); + if (this.convertScroll) { + scrollConverter.activate(); + } this.target.bind('scroll', {scope: this} , this.onScroll); }; ControllerScroll.prototype.deactivate = function(jarallax) { JarallaxController.prototype.deactivate.call(this, jarallax); + if (this.convertScroll) { + scrollConverter.deactivate(); + } this.target.unbind('scroll'); }; ControllerScroll.prototype.onScroll = function(event) { var controller = event.data.scope; + //console.log(controller.target.scrollTop()); + if(controller.jarallax.jumping){ + if(!controller.jarallax.jumpingAllowed) { + controller.jarallax.clearSmooth(controller.jarallax); + } + } + if (controller.isActive) { - var y = event.data.y || controller.target.scrollTop(); - var progress = y/controller.scrollSpace; - + var progress; + if (!controller.horizontal) { + var y = event.data.y || controller.target.scrollTop(); + progress = y/controller.scrollSpace; + } else { + var x = event.data.x || controller.target.scrollLeft(); + progress = x/controller.scrollSpace; + } if(!controller.smoothing){ controller.jarallax.setProgress(progress, true); } else { - controller.targetProgress = progress; + controller.targetProgress = Math.min(progress, 1); controller.smooth(); } } @@ -54,13 +76,12 @@ ControllerScroll.prototype.smooth = function(externalScope) { } var oldProgress = scope.jarallax.progress; - var animationSpace = scope.targetProgress - oldProgress; clearTimeout(scope.timer); - + if(animationSpace > 0.0001 || animationSpace < -0.0001){ var newProgress = oldProgress + animationSpace / 5; - + scope.timer = window.setTimeout(function(){ scope.smooth(scope);}, scope.jarallax.FPS_INTERVAL); scope.jarallax.setProgress(newProgress, true); @@ -71,8 +92,12 @@ ControllerScroll.prototype.smooth = function(externalScope) { ControllerScroll.prototype.update = function(progress) { var scrollPosition = progress * this.scrollSpace; - + if(!this.jarallax.allowWeakProgress) { - $('body').scrollTop(scrollPosition); + if (!controller.horizontal) { + $(window).scrollTop(scrollPosition); + } else { + $(window).scrollLeft(scrollPosition); + } } }; diff --git a/source/jarallax.js b/source/jarallax.js index 1729822..77a29db 100644 --- a/source/jarallax.js +++ b/source/jarallax.js @@ -1,7 +1,7 @@ //////////////////////////////////////////////////////////////////////////////// // jarallax class ////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////// -var Jarallax = function (controller) { +var Jarallax = function () { this.FPS = 24; this.FPS_INTERVAL = 1000 / this.FPS; this.FRAME_DATA_SAMPLE = 24; @@ -11,37 +11,44 @@ var Jarallax = function (controller) { this.animations = []; this.defaultValues = []; this.progress = 0.0; + this.properties = {}; + this.prevProgress = 0.0; this.controllers = []; this.maxProgress = 1; this.timer = undefined; this.allowWeakProgress = true; this.frameRate = this.FPS; this.stepSize = 0; - - if (controller === undefined) { - if($.browser.iDevice){ - this.controllers.push(new ControllerApple(false)); - } else if ($.browser.mozilla) { - this.controllers.push(new ControllerScroll(false)); + this.jumping = false; + + for(var argument in arguments) { + if (arguments[argument] instanceof Array){ + this.controllers = arguments[argument]; + } else if (arguments[argument].isController) { + this.controllers.push(arguments[argument]); + } else if (arguments[argument] instanceof Object) { + this.properties = arguments[argument]; } else { - this.controllers.push(new ControllerScroll(true)); + console.log('WARNING: bad argument ' + argument); } - } else if (controller !== 'none') { - if (controller.length) { - this.controllers = controller; - } else if (typeof (controller) === 'object') { - this.controllers.push(controller); + } + + if (!this.controller) { + if($.browser.iDevice) { + this.controllers.push(new ControllerApple(false)); + } else if ($.browser.mozilla) { + this.controllers.push(new ControllerScroll(false, + this.properties.horizontal, this.properties.disableVertical)); } else { - throw new Error('wrong controller data type: "' + - typeof (controller) + - '". Expected "object" or "array"'); + this.controllers.push(new ControllerScroll(true, + this.properties.horizontal, this.properties.disableVertical)); } } for (var i in this.controllers) { this.controllers[i].activate(this); } - + this.frameChart = []; for(var j = 1; j <= 600; j++) { this.frameChart[j] = (1000 / j); @@ -57,34 +64,33 @@ Jarallax.prototype.setProgress = function (progress, isWeak) { } else if (progress < 0) { progress = 0; } - this.progress = progress; - - - if (this.allowWeakProgress || !weak) { - this.previousTime = new Date(); - - this.currentTime = new Date(); + console.log(progress); - var weak = isWeak || false; - - for (var defaultValue in this.defaultValues) { - this.defaultValues[defaultValue].activate(this.progress); - } - - for (var animation in this.animations) { - this.animations[animation].activate(this.progress); - } - - for (var controller in this.controllers) { - this.controllers[controller].update(this.progress); + if(this.progress != progress){ + this.progress = progress; + if (this.allowWeakProgress || !weak) { + + this.previousTime = new Date(); + this.currentTime = new Date(); + var weak = isWeak || false; + + for (var defaultValue in this.defaultValues) { + this.defaultValues[defaultValue].activate(this.progress); + } + + for (var animation in this.animations) { + this.animations[animation].activate(this.progress); + } + + for (var controller in this.controllers) { + this.controllers[controller].update(this.progress); + } + + this.currentTime = new Date(); + this.stepSize = Math.max(this.currentTime - this.previousTime, this.stepSize); } - - this.currentTime = new Date(); - this.stepSize = Math.max(this.currentTime - this.previousTime, this.stepSize); } - - }; Jarallax.prototype.clearAnimations = function() { @@ -105,24 +111,28 @@ Jarallax.prototype.jumpToProgress = function (progress, time, fps) { } else if (progress.indexOf('%') != -1) { progress = parseFloat(progress) / 100; } - + + if(progress == this.progress) { + return false; + } + if (progress > 1) { progress = 1; } else if (progress < 0) { progress = 0; } - + this.smoothProperties = {}; this.smoothProperties.timeStep = 1000 / fps; this.smoothProperties.steps = time / this.smoothProperties.timeStep; this.smoothProperties.currentStep = 0; - + this.smoothProperties.startProgress = this.progress; this.smoothProperties.diffProgress = progress - this.progress; this.smoothProperties.previousValue = this.progress; this.smooth(); this.allowWeakProgress = false; - + return false; }; @@ -133,7 +143,7 @@ Jarallax.prototype.smooth = function (externalScope) { } else { scope = externalScope; } - + scope.smoothProperties.currentStep++; clearTimeout(scope.timer); if (scope.smoothProperties.currentStep < scope.smoothProperties.steps) { @@ -143,26 +153,35 @@ Jarallax.prototype.smooth = function (externalScope) { scope.smoothProperties.diffProgress, 1, 5); - + + scope.jumpingAllowed = true; scope.setProgress(newProgress); + scope.jumpingAllowed = false; scope.timer = window.setTimeout(function(){scope.smooth(scope);}, scope.smoothProperties.timeStep); scope.smoothProperties.previousValue = newProgress; scope.allowWeakProgress = false; } else { - scope.allowWeakProgress = true; + scope.jumpingAllowed = true; scope.setProgress(scope.smoothProperties.startProgress + scope.smoothProperties.diffProgress); - delete scope.smoothProperties; + scope.jumpingAllowed = false; + scope.clearSmooth(scope); } }; +Jarallax.prototype.clearSmooth = function(scope){ + scope.allowWeakProgress = true; + clearTimeout(scope.timer); + delete scope.smoothProperties; +}; + Jarallax.prototype.setDefault = function (selector, values) { if (!selector) { throw new Error('no selector defined.'); } - + if (JarallaxTools.isValues(values)) { - var newDefault = new JaralaxObject(selector, values); + var newDefault = new JarallaxObject(selector, values); newDefault.activate(); this.defaultValues.push(newDefault); } @@ -172,7 +191,7 @@ Jarallax.prototype.addStatic = function (selector, values) { if (!selector) { throw new Error('no selector defined.'); } - + if (JarallaxTools.isValues(values)) { var newDefault = new JarallaxStatic(selector, values[0], values[1]); @@ -186,7 +205,7 @@ Jarallax.prototype.addCounter = function (properties) { Jarallax.prototype.addController = function (controller, activate) { this.controllers.push(controller); - + if (activate) { controller.activate(this); } @@ -200,14 +219,14 @@ Jarallax.prototype.addAnimation = function (selector, values, platforms, allMust } else { platforms = platforms || [JarallaxTools.Platform.Any]; } - + if (JarallaxTools.PlatformAllowed(platforms, allMustBeTrue)) { var newAnimation; - + if (!selector) { throw new Error('no selector defined.'); } - + var returnValue = []; if (JarallaxTools.isValues(values)) { if (values.length) { @@ -239,14 +258,14 @@ Jarallax.prototype.addAnimation = function (selector, values, platforms, allMust values.progress = '100%'; } var startValues = {}; - + for (var j in values) { startValues[j] = $(selector).css(j); } - + startValues.progress = '0%'; - - + + newAnimation = new JarallaxAnimation(selector, startValues, values, this); this.animations.push(newAnimation); returnValue.push(newAnimation); @@ -261,40 +280,40 @@ Jarallax.prototype.cloneAnimation = function (selector, adittionalValues, animat if (!selector) { throw new Error('no selector defined.'); } - + var newAnimations = []; var adittionalValuesArray = []; - + for (var i = 0; i < animations.length + 1; i++) { if (adittionalValues instanceof Array) { adittionalValuesArray.push(adittionalValues[i]); } else { - adittionalValuesArray.push(adittionalValues); + adittionalValuesArray.push(adittionalValues); } } - + for (i = 0; i < animations.length; i++) { var currentAnimation = animations[i]; var newStart = JarallaxTools.clone(currentAnimation.startValues); var newEnd = JarallaxTools.clone(currentAnimation.endValues); - + var adittionalValueStart = adittionalValuesArray[i]; var adittionalValueEnd = adittionalValuesArray[i + 1]; - + for (var j in newStart) { if (adittionalValueStart[j]) { newStart[j] = JarallaxTools.calculateNewValue(adittionalValueStart[j], newStart[j]); } } - + for (var k in newEnd) { if (adittionalValueEnd[k]) { newEnd[k] = JarallaxTools.calculateNewValue(adittionalValueEnd[k], newEnd[k]); } } - + newAnimations.push(this.addAnimation(selector, [newStart, newEnd])[0]); - + } return newAnimations; }; @@ -306,7 +325,7 @@ Jarallax.EASING = { 'linear':function (currentTime, beginningValue, changeInValue, duration, power) { return currentTime / duration * changeInValue + beginningValue; }, - + 'easeOut':function (currentTime, beginningValue, changeInValue, duration, power) { if (power === undefined) { power = 2; @@ -331,7 +350,7 @@ Jarallax.EASING = { currentTime = currentTime - duration; return ((Math.pow((duration - currentTime) / duration, power) * -1) + 1) * changeInValue + beginningValue + changeInValue; } - + return Math.pow(currentTime / duration, power) * changeInValue + beginningValue; } }; diff --git a/source/jarallax_animation.js b/source/jarallax_animation.js index 2f1273e..8b28f67 100644 --- a/source/jarallax_animation.js +++ b/source/jarallax_animation.js @@ -53,6 +53,10 @@ JarallaxAnimation.prototype.activate = function (progress) { var result = Jarallax.EASING[style.easing](currentTime, startValue , changeInValue, duration, style.power); + if(units == 'px'){ + result = parseInt(result, 10); + } + if(units !== '.'){ result+= units; } @@ -67,48 +71,48 @@ JarallaxAnimation.prototype.activate = function (progress) { } }; -JarallaxAnimation.prototype.dispatchEvent = function(progress_old, progress_new, +JarallaxAnimation.prototype.dispatchEvent = function(progressOld, progressNew, start, end) { var events = this.startValues.event; - var event_data = {}; - event_data.animation = this; - event_data.selector = this.selector; + var eventData = {}; + eventData.animation = this; + eventData.selector = this.selector; - if (progress_new >= start && progress_new <= end ) { - if (events.start && progress_old < start) { - event_data.type = 'start'; - events.start(event_data); + if (progressNew >= start && progressNew <= end ) { + if (events.start && progressOld < start) { + eventData.type = 'start'; + events.start(eventData); } - if (events.start && progress_old > end) { - event_data.type = 'rewind'; - events.start(event_data); + if (events.start && progressOld > end) { + eventData.type = 'rewind'; + events.start(eventData); } if (events.animating) { - event_data.type = 'animating'; - events.animating(event_data); + eventData.type = 'animating'; + events.animating(eventData); } - if (events.forward && progress_old < progress_new) { - event_data.type = 'forward'; - events.forward(event_data); + if (events.forward && progressOld < progressNew) { + eventData.type = 'forward'; + events.forward(eventData); } - if (events.reverse && progress_old > progress_new) { - event_data.type = 'reverse'; - events.reverse(event_data); + if (events.reverse && progressOld > progressNew) { + eventData.type = 'reverse'; + events.reverse(eventData); } } else { - if (events.complete && progress_old < end && progress_new > end) { - event_data.type = 'complete'; - events.complete(event_data); + if (events.complete && progressOld < end && progressNew > end) { + eventData.type = 'complete'; + events.complete(eventData); } - if (events.rewinded && progress_old > start && progress_new < start) { - event_data.type = 'rewind'; - events.rewinded(event_data); + if (events.rewinded && progressOld > start && progressNew < start) { + eventData.type = 'rewind'; + events.rewinded(eventData); } } }; diff --git a/source/jarallax_controller.js b/source/jarallax_controller.js index 2a05e96..748a63a 100644 --- a/source/jarallax_controller.js +++ b/source/jarallax_controller.js @@ -4,6 +4,7 @@ JarallaxController = function() { this.isActive = false; this.bindings = []; + this.isController = true; }; diff --git a/source/jarallax_object.js b/source/jarallax_object.js index aa42f50..2e1460c 100644 --- a/source/jarallax_object.js +++ b/source/jarallax_object.js @@ -2,12 +2,12 @@ // Jarallax object class /////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////// -JaralaxObject = function (selector, values) { +JarallaxObject = function (selector, values) { this.selector = selector; this.values = values; }; -JaralaxObject.prototype.activate = function (position) { +JarallaxObject.prototype.activate = function (position) { for (var i in this.values) { $(this.selector).css(i ,this.values[i]); } diff --git a/source/jarallax_tools.js b/source/jarallax_tools.js index ec8c139..d0fbb22 100644 --- a/source/jarallax_tools.js +++ b/source/jarallax_tools.js @@ -116,16 +116,6 @@ JarallaxTools.Platforms = ['webkit', 'mobile', 'nonMobile']; -/*jQuery.browser.webkit -jQuery.browser.opera -jQuery.browser.msie -jQuery.browser.mozilla*/ - -/** - * jQuery.browser.mobile (http://detectmobilebrowser.com/) - * jQuery.browser.mobile will be true if the browser is a mobile device - **/ -//(function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4));})(navigator.userAgent||navigator.vendor||window.opera); jQuery.browser.android = /android/i.test(navigator.userAgent.toLowerCase()); jQuery.browser.blackBerry = /blackberry/i.test(navigator.userAgent.toLowerCase());