From c9f9c641e01f92adb9aca8d22a879f7b825641f2 Mon Sep 17 00:00:00 2001 From: Kaspars Date: Thu, 22 Oct 2015 20:14:31 +0300 Subject: [PATCH] fixed percentage values for translate3d --- README.md | 16 +++---- examples/Dave Gamache.html | 46 ++++++++++---------- examples/sections.html | 6 +-- jquery.data-parallax.js | 86 +++++++++++++++++++++++++++++-------- jquery.data-parallax.min.js | 2 +- 5 files changed, 102 insertions(+), 54 deletions(-) diff --git a/README.md b/README.md index 5f5deea..c3949ca 100644 --- a/README.md +++ b/README.md @@ -66,25 +66,25 @@ Make an elements' position fixed during the scene. Adds one or more classes to the element during the scene. #### x -**Type:** number +**Type:** number or string (percentage or viewport units) -translateX +translateX. Percentages in this case are relative to the duration. #### y -**Type:** number +**Type:** number or string (percentage or viewport units) -translateY +translateY. Percentages in this case are relative to the duration. #### z -**Type:** number +**Type:** number or string (percentage or viewport units) -translateZ +translateZ. Percentages in this case are relative to the duration. #### scale or scaleX and scaleY -**Type:** number +**Type:** number or string (percentage) #### rotate -**Type:** number +**Type:** number or string (percentage) Rotation in degrees. diff --git a/examples/Dave Gamache.html b/examples/Dave Gamache.html index a05675a..64048fe 100644 --- a/examples/Dave Gamache.html +++ b/examples/Dave Gamache.html @@ -24,36 +24,36 @@

-

Here's an example of 16 elements scaling, fading and moving at once.

-
    -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • +

    Here's an example of 16 elements scaling, fading and moving at once.

    +
      +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
-

Or better yet, a realistic example of showcasing some design work.

-

Really, anything is possible …

- -
+

Or better yet, a realistic example of showcasing some design work.

+

Really, anything is possible …

+ +
- +
diff --git a/examples/sections.html b/examples/sections.html index 5bcd9fb..06e1738 100644 --- a/examples/sections.html +++ b/examples/sections.html @@ -11,19 +11,19 @@
Content 1
-
+
Content 2
-
+
Content 3
-
+
Content 4
diff --git a/jquery.data-parallax.js b/jquery.data-parallax.js index 440753e..e199df7 100644 --- a/jquery.data-parallax.js +++ b/jquery.data-parallax.js @@ -9,7 +9,9 @@ documentWidth, documentHeight, scrollTicking = false, resizeTicking = false, - isTouchDevice = window.Modernizr && typeof(Modernizr.touchevents) != 'undefined' ? Modernizr.touchevents : testTouchEvents(); + isTouchDevice = window.Modernizr && typeof(Modernizr.touchevents) != 'undefined' ? Modernizr.touchevents : testTouchEvents(), + PERC_RE = /%/g, + VU_RE = /v(w|h)/g; function testTouchEvents() { return 'ontouchstart' in window // works on most browsers @@ -298,14 +300,13 @@ function convertOption(value, maxValue) { if (typeof value === "string") { - var percValue = parseFloat(value) / 100; - if (value.match(/%/g)) { - value = percValue * maxValue; + if (value.match(PERC_RE)) { + value = convertPerc(value, maxValue); } else { - var matches = value.match(/v(w|h)/g); + var matches = value.match(VU_RE); if (matches) { - value = percValue * (matches[0] === 'vw' ? windowWidth : windowHeight); + value = convertVU(value, matches[0]); } } } @@ -314,6 +315,14 @@ } return value; } + + function convertVU(percent, unit) { + return convertPerc(percent, (unit === 'vw' ? windowWidth : windowHeight)); + } + + function convertPerc(percent, maxValue) { + return parseFloat(percent) / 100 * maxValue; + } function isElement(obj) { try { @@ -482,28 +491,67 @@ typeof this.from != "undefined" || (this.from = defaultValue); } }; - + function ScalarScene($el, options, maxValue, defaultUnit) { + this.convertPerc = false; + this.unit = defaultUnit; if (typeof maxValue != "undefined") { options.from = convertOption(options.from, maxValue); options.to = convertOption(options.to, maxValue); } + else { + if (typeof options.from === "string") { + options.from = this._parseString(options.from); + } + else if (typeof options.from === "function") { + options.from = options.from(); + } + if (typeof options.to === "string") { + options.to = this._parseString(options.to); + } + else if (typeof options.to === "function") { + options.to = options.to(); + } + } Scene.call(this, $el, options); - this.unit = typeof this.to === "string" ? parseUnit(this.to) : defaultUnit; } ScalarScene.prototype = inherit(Scene.prototype, { + _parseString: function(value) { + if (value.match(PERC_RE)) { + this.convertPerc = true; + } + else { + var matches = value.match(VU_RE); + if (matches) { + value = convertVU(value, matches[0]); + } + else { + this.unit = parseUnit(value); + } + } + return value; + }, _getNewValue: function() { - // todo: think about this once more ("90" != 90) - if (typeof(this.from) != typeof(this.to)) { - console.error("Parallax from and to values have different types " + this.from + "("+typeof(this.from)+") " + this.to + "("+typeof(this.to)+")"); + var from = this.from, + to = this.to; + if (typeof from === "string") { + if (this.convertPerc && from.substr(-1) === "%") { + from = convertOption(from, this.durationPx); + } + else { + from = parseFloat(from); + } } - if (typeof this.to === "string") { - var from = parseFloat(this.from), - to = parseFloat(this.to); - return interpolate(from, to, this.getProgress()) + this.unit; + if (typeof to === "string") { + if (this.convertPerc && to.substr(-1) === "%") { + to = convertOption(to, this.durationPx); + } + else { + to = parseFloat(to); + } } - var suffix = (typeof this.unit === "undefined" ? 0 : this.unit) - return interpolate(this.from, this.to, this.getProgress()) + suffix; + var suffix = (typeof this.unit === "undefined" ? 0 : this.unit); + return interpolate(from, to, this.getProgress()) + suffix; } }); @@ -672,10 +720,10 @@ function TransformContainer($el, options) { SceneContainer.call(this, $el, options); if (options.x) { - this.x = new VOScene($el, options.x, 'translateX', $el.outerWidth(true)); + this.x = new VOScene($el, options.x, 'translateX'); } if (options.y) { - this.y = new VOScene($el, options.y, 'translateY', $el.outerHeight(true)); + this.y = new VOScene($el, options.y, 'translateY'); } if (options.z) { this.z = new VOScene($el, options.z, 'translateZ'); diff --git a/jquery.data-parallax.min.js b/jquery.data-parallax.min.js index 91412b1..cfda4d1 100644 --- a/jquery.data-parallax.min.js +++ b/jquery.data-parallax.min.js @@ -1 +1 @@ -(function($){"use strict";var $elements=null,elementsArr,animationsArr,scroll,windowHeight,windowWidth,documentWidth,documentHeight,scrollTicking=false,resizeTicking=false,isTouchDevice=window.Modernizr&&typeof Modernizr.touchevents!="undefined"?Modernizr.touchevents:testTouchEvents();function testTouchEvents(){return"ontouchstart"in window||"onmsgesturechange"in window}$.fn.parallax=function(method){switch(method){case"reset":break;case"destroy":$elements.not(this);break;default:if(!isTouchDevice){this.data("parallax-js",method);var firstCall=$elements===null;if(firstCall){updateDimensions()}if(firstCall){$elements=this;window.onresize=onResize;window.onscroll=onScroll;elementsArr=[];animationsArr=[]}else{$elements=$elements.add(this)}updateAnimationsArray.call(this,elementsArr.length);elementsArr=$elements.toArray();onScroll()}}return this};function parseOptions(){var optionsArr=[],dataOptions=this.data("parallax"),jsOptions=this.data("parallax-js");typeof dataOptions!="undefined"||(dataOptions={});typeof dataOptions=="object"||console.error("Unable to parse data-parallax attribute "+getSelector(this));typeof jsOptions!="undefined"||(jsOptions={});typeof jsOptions=="object"||console.error("Unrecognized options passed to $.fn.parallax");if(!Array.isArray(dataOptions)){dataOptions=[dataOptions]}if(!Array.isArray(jsOptions)){jsOptions=[jsOptions]}for(var i=0,len=Math.max(dataOptions.length,jsOptions.length);i3){result.a=parseFloat(array[3])}return result};RGBColor.fromString=function(string,result){if(string.match(/^#([0-9a-f]{3})$/i)){return RGBColor.fromArray([parseInt(string.charAt(1),16)*17,parseInt(string.charAt(2),16)*17,parseInt(string.charAt(3),16)*17],result)}if(string.match(/^#([0-9a-f]{6})$/i)){return RGBColor.fromArray([parseInt(string.substr(1,2),16),parseInt(string.substr(3,2),16),parseInt(string.substr(5,2),16)],result)}return RGBColor.fromArray(string.replace(/^rgb(a)?\((.*)\)$/,"$2").split(","),result)};RGBColor.fromHSV=function(hsv,result){result||(result=new RGBColor);var r=hsv.v,g=hsv.v,b=hsv.v;if(hsv.s!=0){var f=hsv.h/60-Math.floor(hsv.h/60);var p=hsv.v*(1-hsv.s/100);var q=hsv.v*(1-hsv.s/100*f);var t=hsv.v*(1-hsv.s/100*(1-f));switch(Math.floor(hsv.h/60)){case 0:r=hsv.v;g=t;b=p;break;case 1:r=q;g=hsv.v;b=p;break;case 2:r=p;g=hsv.v;b=t;break;case 3:r=p;g=q;b=hsv.v;break;case 4:r=t;g=p;b=hsv.v;break;case 5:r=hsv.v;g=p;b=q;break}}result.r=r*2.55;result.g=g*2.55;result.b=b*2.55;result.a=hsv.a;return result};RGBColor.prototype={getHue:function(maximum,range){var hue=0;if(range!=0){switch(maximum){case this.r:hue=(this.g-this.b)/range*60;if(hue<0)hue+=360;break;case this.g:hue=(this.b-this.r)/range*60+120;break;case this.b:hue=(this.r-this.g)/range*60+240;break}}return hue},interpolate:function(to,progress){var src=HSVColor.fromRGB(this),dst=HSVColor.fromRGB(to);src.interpolate(dst,progress);RGBColor.fromHSV(src,this)},toString:function(){if(this.a!==1){return"rgba("+this.r.toFixed()+","+this.g.toFixed()+","+this.b.toFixed()+","+this.a.toFixed(2)+")"}return"rgb("+this.r.toFixed()+","+this.g.toFixed()+","+this.b.toFixed()+")"}};function HSVColor(h,s,v,a){this.h=h||0;this.s=s||0;this.v=v||0;this.a=typeof a==="number"?a:1}HSVColor.fromRGB=function(rgb,result){result||(result=new HSVColor);var maximum=Math.max(rgb.r,rgb.g,rgb.b);var range=maximum-Math.min(rgb.r,rgb.g,rgb.b);result.h=rgb.getHue(maximum,range);result.s=maximum==0?0:100*range/maximum;result.v=maximum/2.55;result.a=rgb.a;return result};HSVColor.prototype={interpolate:function(to,progress,precision){this.h=interpolate(this.h,to.h,progress);this.s=interpolate(this.s,to.s,progress);this.v=interpolate(this.v,to.v,progress);this.a=interpolate(this.a,to.a,progress)},toString:function(){if(this.a!==1){return"hsva("+this.h+","+this.s+","+this.v+","+this.a.toFixed(2)+")"}return"hsv("+this.h+","+this.s+","+this.v+")"}};function VO(){}VO.prototype={get:function(propName){return this[propName]},set:function(propName,value){this[propName]=value;this._changed=true},isChanged:function(){return this._changed===true}};function XY(){this.x=this.y=0;this.xUnit=this.yUnit="px"}XY.fromArray=function(array,result){result||(result=new XY);var a=array[0],b=array[1];if(typeof a==="string"){result.x=parseFloat(a);result.xUnit=parseUnit(a)}else{result.x=a}if(typeof b==="string"){result.y=parseFloat(b);result.yUnit=parseUnit(b)}else{result.y=b}return result};XY.fromString=function(string,result){return XY.fromArray(string.split(" "),result)};XY.prototype=inherit(VO.prototype,{toString:function(){return this.x.toFixed(2)+this.xUnit+" "+this.y.toFixed(2)+this.yUnit}});function Transform(){this.translateX=this.translateY=this.translateZ=0;this.scaleX=this.scaleY=1;this.rotate=0}Transform.fromMatrix=function(matrix,result){result||(result=new Transform);var a=matrix.matrix[0],b=matrix.matrix[1],c=matrix.matrix[4],d=matrix.matrix[5];result.translateX=matrix.matrix[12];result.translateY=matrix.matrix[13];result.translateZ=matrix.matrix[14];result.scaleX=Math.sqrt(a*a+b*b);result.scaleY=Math.sqrt(c*c+d*d);result.rotate=Math.round(Math.atan2(b,a)*(180/Math.PI));return result};Transform.prototype=inherit(VO.prototype,{get:function(propName){if(propName==="scale"){return this.scaleX}return this[propName]},set:function(propName,value){if(propName==="scale"){this.scaleX=value;this.scaleY=value}else{this[propName]=value}this._changed=true},toString:function(){var string="translate3d("+this.translateX+"px, "+this.translateY+"px, "+this.translateZ+"px)";if(this.scaleX!=1||this.scaleY!=1){string+=" scale("+this.scaleX+","+this.scaleY+")"}if(this.rotate){string+="rotate("+this.rotate+"deg)"}return string}});function TransformMatrix(){this.matrix=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]}TransformMatrix.fromArray=function(array,result){result||(result=new TransformMatrix);if(array.length<6){return result}for(var i=0;i3){result.a=parseFloat(array[3])}return result};RGBColor.fromString=function(string,result){if(string.match(/^#([0-9a-f]{3})$/i)){return RGBColor.fromArray([parseInt(string.charAt(1),16)*17,parseInt(string.charAt(2),16)*17,parseInt(string.charAt(3),16)*17],result)}if(string.match(/^#([0-9a-f]{6})$/i)){return RGBColor.fromArray([parseInt(string.substr(1,2),16),parseInt(string.substr(3,2),16),parseInt(string.substr(5,2),16)],result)}return RGBColor.fromArray(string.replace(/^rgb(a)?\((.*)\)$/,"$2").split(","),result)};RGBColor.fromHSV=function(hsv,result){result||(result=new RGBColor);var r=hsv.v,g=hsv.v,b=hsv.v;if(hsv.s!=0){var f=hsv.h/60-Math.floor(hsv.h/60);var p=hsv.v*(1-hsv.s/100);var q=hsv.v*(1-hsv.s/100*f);var t=hsv.v*(1-hsv.s/100*(1-f));switch(Math.floor(hsv.h/60)){case 0:r=hsv.v;g=t;b=p;break;case 1:r=q;g=hsv.v;b=p;break;case 2:r=p;g=hsv.v;b=t;break;case 3:r=p;g=q;b=hsv.v;break;case 4:r=t;g=p;b=hsv.v;break;case 5:r=hsv.v;g=p;b=q;break}}result.r=r*2.55;result.g=g*2.55;result.b=b*2.55;result.a=hsv.a;return result};RGBColor.prototype={getHue:function(maximum,range){var hue=0;if(range!=0){switch(maximum){case this.r:hue=(this.g-this.b)/range*60;if(hue<0)hue+=360;break;case this.g:hue=(this.b-this.r)/range*60+120;break;case this.b:hue=(this.r-this.g)/range*60+240;break}}return hue},interpolate:function(to,progress){var src=HSVColor.fromRGB(this),dst=HSVColor.fromRGB(to);src.interpolate(dst,progress);RGBColor.fromHSV(src,this)},toString:function(){if(this.a!==1){return"rgba("+this.r.toFixed()+","+this.g.toFixed()+","+this.b.toFixed()+","+this.a.toFixed(2)+")"}return"rgb("+this.r.toFixed()+","+this.g.toFixed()+","+this.b.toFixed()+")"}};function HSVColor(h,s,v,a){this.h=h||0;this.s=s||0;this.v=v||0;this.a=typeof a==="number"?a:1}HSVColor.fromRGB=function(rgb,result){result||(result=new HSVColor);var maximum=Math.max(rgb.r,rgb.g,rgb.b);var range=maximum-Math.min(rgb.r,rgb.g,rgb.b);result.h=rgb.getHue(maximum,range);result.s=maximum==0?0:100*range/maximum;result.v=maximum/2.55;result.a=rgb.a;return result};HSVColor.prototype={interpolate:function(to,progress,precision){this.h=interpolate(this.h,to.h,progress);this.s=interpolate(this.s,to.s,progress);this.v=interpolate(this.v,to.v,progress);this.a=interpolate(this.a,to.a,progress)},toString:function(){if(this.a!==1){return"hsva("+this.h+","+this.s+","+this.v+","+this.a.toFixed(2)+")"}return"hsv("+this.h+","+this.s+","+this.v+")"}};function VO(){}VO.prototype={get:function(propName){return this[propName]},set:function(propName,value){this[propName]=value;this._changed=true},isChanged:function(){return this._changed===true}};function XY(){this.x=this.y=0;this.xUnit=this.yUnit="px"}XY.fromArray=function(array,result){result||(result=new XY);var a=array[0],b=array[1];if(typeof a==="string"){result.x=parseFloat(a);result.xUnit=parseUnit(a)}else{result.x=a}if(typeof b==="string"){result.y=parseFloat(b);result.yUnit=parseUnit(b)}else{result.y=b}return result};XY.fromString=function(string,result){return XY.fromArray(string.split(" "),result)};XY.prototype=inherit(VO.prototype,{toString:function(){return this.x.toFixed(2)+this.xUnit+" "+this.y.toFixed(2)+this.yUnit}});function Transform(){this.translateX=this.translateY=this.translateZ=0;this.scaleX=this.scaleY=1;this.rotate=0}Transform.fromMatrix=function(matrix,result){result||(result=new Transform);var a=matrix.matrix[0],b=matrix.matrix[1],c=matrix.matrix[4],d=matrix.matrix[5];result.translateX=matrix.matrix[12];result.translateY=matrix.matrix[13];result.translateZ=matrix.matrix[14];result.scaleX=Math.sqrt(a*a+b*b);result.scaleY=Math.sqrt(c*c+d*d);result.rotate=Math.round(Math.atan2(b,a)*(180/Math.PI));return result};Transform.prototype=inherit(VO.prototype,{get:function(propName){if(propName==="scale"){return this.scaleX}return this[propName]},set:function(propName,value){if(propName==="scale"){this.scaleX=value;this.scaleY=value}else{this[propName]=value}this._changed=true},toString:function(){var string="translate3d("+this.translateX+"px, "+this.translateY+"px, "+this.translateZ+"px)";if(this.scaleX!=1||this.scaleY!=1){string+=" scale("+this.scaleX+","+this.scaleY+")"}if(this.rotate){string+="rotate("+this.rotate+"deg)"}return string}});function TransformMatrix(){this.matrix=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]}TransformMatrix.fromArray=function(array,result){result||(result=new TransformMatrix);if(array.length<6){return result}for(var i=0;i