From e7c19b068d0d111a4473c6841c7f6c2fd33dec52 Mon Sep 17 00:00:00 2001 From: grisnakh Date: Sun, 28 Oct 2018 18:18:36 +0200 Subject: [PATCH 1/3] Plugin accepts percentage for unit, works with jQuery 3.3.1 --- jquery.scrollme.js | 723 +++++++++++++++++++++-------------------- jquery.scrollme.min.js | 2 +- 2 files changed, 375 insertions(+), 350 deletions(-) diff --git a/jquery.scrollme.js b/jquery.scrollme.js index cffb929..1483644 100644 --- a/jquery.scrollme.js +++ b/jquery.scrollme.js @@ -6,450 +6,475 @@ var scrollme = ( function( $ ) { - // ---------------------------------------------------------------------------------------------------- - // ScrollMe object + // ---------------------------------------------------------------------------------------------------- + // ScrollMe object - var _this = {}; + var _this = {}; - // ---------------------------------------------------------------------------------------------------- - // Properties + // ---------------------------------------------------------------------------------------------------- + // Properties - var $document = $( document ); - var $window = $( window ); + var $document = $( document ); + var $window = $( window ); - _this.body_height = 0; + _this.body_height = 0; - _this.viewport_height = 0; + _this.viewport_height = 0; - _this.viewport_top = 0; - _this.viewport_bottom = 0; + _this.viewport_top = 0; + _this.viewport_bottom = 0; - _this.viewport_top_previous = -1; + _this.viewport_top_previous = -1; - _this.elements = []; - _this.elements_in_view = []; + _this.elements = []; + _this.elements_in_view = []; - _this.property_defaults = - { - 'opacity' : 1, - 'translatex' : 0, - 'translatey' : 0, - 'translatez' : 0, - 'rotatex' : 0, - 'rotatey' : 0, - 'rotatez' : 0, - 'scale' : 1, - 'scalex' : 1, - 'scaley' : 1, - 'scalez' : 1 - }; + _this.property_defaults = + { + 'opacity' : 1, + 'translatex' : 0, + 'translatey' : 0, + 'translatez' : 0, + 'rotatex' : 0, + 'rotatey' : 0, + 'rotatez' : 0, + 'scale' : 1, + 'scalex' : 1, + 'scaley' : 1, + 'scalez' : 1 + }; - _this.scrollme_selector = '.scrollme'; - _this.animateme_selector = '.animateme'; + _this.scrollme_selector = '.scrollme'; + _this.animateme_selector = '.animateme'; - _this.update_interval = 10; + _this.update_interval = 10; - // Easing functions + // Easing functions - _this.easing_functions = - { - 'linear' : function( x ) - { - return x; - }, + _this.easing_functions = + { + 'linear' : function( x ) + { + return x; + }, - 'easeout' : function( x ) - { - return x * x * x; - }, + 'easeout' : function( x ) + { + return x * x * x; + }, - 'easein' : function( x ) - { - x = 1 - x; - return 1 - ( x * x * x ); - }, + 'easein' : function( x ) + { + x = 1 - x; + return 1 - ( x * x * x ); + }, - 'easeinout' : function( x ) - { - if( x < 0.5 ) - { - return ( 4 * x * x * x ); - } - else - { - x = 1 - x; - return 1 - ( 4 * x * x * x ) ; - } - } - }; + 'easeinout' : function( x ) + { + if( x < 0.5 ) + { + return ( 4 * x * x * x ); + } + else + { + x = 1 - x; + return 1 - ( 4 * x * x * x ) ; + } + } + }; - // Document events to bind initialisation to + // Document events to bind initialisation to - _this.init_events = - [ - 'ready', - 'page:load', // Turbolinks - 'page:change' // Turbolinks - ]; + _this.init_events = + [ + 'ready', + 'page:load', // Turbolinks + 'page:change' // Turbolinks + ]; - // ---------------------------------------------------------------------------------------------------- - // Initialisation conditions + // ---------------------------------------------------------------------------------------------------- + // Initialisation conditions - _this.init_if = function() { return true; } + _this.init_if = function() { return true; } - // ---------------------------------------------------------------------------------------------------- - // Initialisation + // ---------------------------------------------------------------------------------------------------- + // Initialisation - _this.init = function() - { - // Cancel if initialisation conditions not met + _this.init = function() + { + // Cancel if initialisation conditions not met - if( !_this.init_if() ) return false; + if( !_this.init_if() ) return false; - // Load all elements to animate + // Load all elements to animate - _this.init_elements(); + _this.init_elements(); - // Get element & viewport sizes + // Get element & viewport sizes - _this.on_resize(); + _this.on_resize(); - // Recalculate heights & positions on resize and rotate + // Recalculate heights & positions on resize and rotate - $window.on( 'resize orientationchange' , function(){ _this.on_resize(); } ); + $window.on( 'resize orientationchange' , function(){ _this.on_resize(); } ); - // Recalculate heights & positions when page is fully loaded + a bit just in case + // Recalculate heights & positions when page is fully loaded + a bit just in case - $window.load( function(){ setTimeout( function(){ _this.on_resize(); } , 100 ) }); + $(document).ready( function(){ setTimeout( function(){ _this.on_resize(); } , 100 ) }); - // Start animating - setInterval( _this.update , _this.update_interval ); + // Start animating - return true; - } + setInterval( _this.update , _this.update_interval ); - // ---------------------------------------------------------------------------------------------------- - // Get list and pre-load animated elements + return true; + } - _this.init_elements = function() - { - // For each reference element + // ---------------------------------------------------------------------------------------------------- + // Get list and pre-load animated elements - $( _this.scrollme_selector ).each( function() - { - var element = {}; + _this.init_elements = function() + { + // For each reference element - element.element = $( this ); + $( _this.scrollme_selector ).each( function() + { + var element = {}; - var effects = []; + element.element = $( this ); - // For each animated element + var effects = []; - $( this ).find( _this.animateme_selector ).addBack( _this.animateme_selector ).each( function() - { - // Get effect details + // For each animated element - var effect = {}; + $( this ).find( _this.animateme_selector ).addBack( _this.animateme_selector ).each( function() + { + // Get effect details - effect.element = $( this ); + var effect = {}; - effect.when = effect.element.data( 'when' ); - effect.from = effect.element.data( 'from' ); - effect.to = effect.element.data( 'to' ); + effect.element = $( this ); - if( effect.element.is( '[data-crop]' ) ) - { - effect.crop = effect.element.data( 'crop' ); - } - else - { - effect.crop = true; - } + effect.when = effect.element.data( 'when' ); + effect.from = effect.element.data( 'from' ); + effect.to = effect.element.data( 'to' ); - if( effect.element.is( '[data-easing]' ) ) - { - effect.easing = _this.easing_functions[ effect.element.data( 'easing' ) ] - } - else - { - effect.easing = _this.easing_functions[ 'easeout' ]; - } + if( effect.element.is( '[data-crop]' ) ) + { + effect.crop = effect.element.data( 'crop' ); + } + else + { + effect.crop = true; + } - // Get animated properties + if( effect.element.is( '[data-easing]' ) ) + { + effect.easing = _this.easing_functions[ effect.element.data( 'easing' ) ] + } + else + { + effect.easing = _this.easing_functions[ 'easeout' ]; + } - var properties = {}; + // Get animated properties - if( effect.element.is( '[data-opacity]' ) ) properties.opacity = effect.element.data( 'opacity' ); - if( effect.element.is( '[data-translatex]' ) ) properties.translatex = effect.element.data( 'translatex' ); - if( effect.element.is( '[data-translatey]' ) ) properties.translatey = effect.element.data( 'translatey' ); - if( effect.element.is( '[data-translatez]' ) ) properties.translatez = effect.element.data( 'translatez' ); - if( effect.element.is( '[data-rotatex]' ) ) properties.rotatex = effect.element.data( 'rotatex' ); - if( effect.element.is( '[data-rotatey]' ) ) properties.rotatey = effect.element.data( 'rotatey' ); - if( effect.element.is( '[data-rotatez]' ) ) properties.rotatez = effect.element.data( 'rotatez' ); - if( effect.element.is( '[data-scale]' ) ) properties.scale = effect.element.data( 'scale' ); - if( effect.element.is( '[data-scalex]' ) ) properties.scalex = effect.element.data( 'scalex' ); - if( effect.element.is( '[data-scaley]' ) ) properties.scaley = effect.element.data( 'scaley' ); - if( effect.element.is( '[data-scalez]' ) ) properties.scalez = effect.element.data( 'scalez' ); + var properties = {}; - effect.properties = properties; + if( effect.element.is( '[data-opacity]' ) ) properties.opacity = effect.element.data( 'opacity' ); + if( effect.element.is( '[data-translatex]' ) ) properties.translatex = effect.element.data( 'translatex' ); + if( effect.element.is( '[data-translatey]' ) ) properties.translatey = effect.element.data( 'translatey' ); + if( effect.element.is( '[data-translatez]' ) ) properties.translatez = effect.element.data( 'translatez' ); + if( effect.element.is( '[data-rotatex]' ) ) properties.rotatex = effect.element.data( 'rotatex' ); + if( effect.element.is( '[data-rotatey]' ) ) properties.rotatey = effect.element.data( 'rotatey' ); + if( effect.element.is( '[data-rotatez]' ) ) properties.rotatez = effect.element.data( 'rotatez' ); + if( effect.element.is( '[data-scale]' ) ) properties.scale = effect.element.data( 'scale' ); + if( effect.element.is( '[data-scalex]' ) ) properties.scalex = effect.element.data( 'scalex' ); + if( effect.element.is( '[data-scaley]' ) ) properties.scaley = effect.element.data( 'scaley' ); + if( effect.element.is( '[data-scalez]' ) ) properties.scalez = effect.element.data( 'scalez' ); - effects.push( effect ); - }); + effect.properties = properties; - element.effects = effects; + effects.push( effect ); + }); - _this.elements.push( element ); - }); - } + element.effects = effects; - // ---------------------------------------------------------------------------------------------------- - // Update elements + _this.elements.push( element ); + }); + } - _this.update = function() - { - window.requestAnimationFrame( function() - { - _this.update_viewport_position(); + // ---------------------------------------------------------------------------------------------------- + // Update elements - if( _this.viewport_top_previous != _this.viewport_top ) - { - _this.update_elements_in_view(); - _this.animate(); - } + _this.update = function() + { + window.requestAnimationFrame( function() + { + _this.update_viewport_position(); - _this.viewport_top_previous = _this.viewport_top; - }); - } + if( _this.viewport_top_previous != _this.viewport_top ) + { + _this.update_elements_in_view(); + _this.animate(); + } - // ---------------------------------------------------------------------------------------------------- - // Animate stuff + _this.viewport_top_previous = _this.viewport_top; + }); + } - _this.animate = function() - { - // For each element in viewport + // ---------------------------------------------------------------------------------------------------- + // Animate stuff - var elements_in_view_length = _this.elements_in_view.length; + _this.animate = function() + { + // For each element in viewport - for( var i=0 ; i ( _this.body_height - _this.viewport_height ) ) end = _this.body_height - _this.viewport_height; + } - default : - var start = element.top - _this.viewport_height; - var end = element.top; - break; - } + // Get scroll position of reference selector - // Crop boundaries + var scroll = ( _this.viewport_top - start ) / ( end - start ); - if( effect.crop ) - { - if( start < 0 ) start = 0; - if( end > ( _this.body_height - _this.viewport_height ) ) end = _this.body_height - _this.viewport_height; - } + // Get relative scroll position for effect - // Get scroll position of reference selector + var from = effect[ 'from' ]; + var to = effect[ 'to' ]; + + var length = to - from; + + var scroll_relative = ( scroll - from ) / length; + + // Apply easing + + var scroll_eased = effect.easing( scroll_relative ); - var scroll = ( _this.viewport_top - start ) / ( end - start ); + // Get new value for each property - // Get relative scroll position for effect + var opacity = _this.animate_value( scroll , scroll_eased , from , to , effect , 'opacity' ); + var translatey = _this.animate_value( scroll , scroll_eased , from , to , effect , 'translatey' ); + var translatex = _this.animate_value( scroll , scroll_eased , from , to , effect , 'translatex' ); + var translatez = _this.animate_value( scroll , scroll_eased , from , to , effect , 'translatez' ); + var rotatex = _this.animate_value( scroll , scroll_eased , from , to , effect , 'rotatex' ); + var rotatey = _this.animate_value( scroll , scroll_eased , from , to , effect , 'rotatey' ); + var rotatez = _this.animate_value( scroll , scroll_eased , from , to , effect , 'rotatez' ); + var scale = _this.animate_value( scroll , scroll_eased , from , to , effect , 'scale' ); + var scalex = _this.animate_value( scroll , scroll_eased , from , to , effect , 'scalex' ); + var scaley = _this.animate_value( scroll , scroll_eased , from , to , effect , 'scaley' ); + var scalez = _this.animate_value( scroll , scroll_eased , from , to , effect , 'scalez' ); - var from = effect[ 'from' ]; - var to = effect[ 'to' ]; + // Override scale values + + if( 'scale' in effect.properties ) + { + scalex = scale; + scaley = scale; + scalez = scale; + } - var length = to - from; + // Update properties - var scroll_relative = ( scroll - from ) / length; + effect.element.css( + { + 'opacity' : opacity, + // 'transform' : 'translate3d( '+translatex+'px , '+translatey+'px , '+translatez+'px ) rotateX( '+rotatex+'deg ) rotateY( '+rotatey+'deg ) rotateZ( '+rotatez+'deg ) scale3d( '+scalex+' , '+scaley+' , '+scalez+' )' + 'transform' : 'translate3d( '+translatex+', '+translatey+', '+translatez+') rotateX( '+rotatex+') rotateY( '+rotatey+') rotateZ( '+rotatez+') scale3d( '+scalex+' , '+scaley+' , '+scalez+' )' + } ); + } + } + } - // Apply easing + // ---------------------------------------------------------------------------------------------------- + // Calculate property values + + _this.animate_value = function( scroll , scroll_eased , from , to , effect , property ) + { + var value_default = _this.property_defaults[ property ]; - var scroll_eased = effect.easing( scroll_relative ); + // Return default value if property is not animated - // Get new value for each property + if( !( property in effect.properties ) ) return value_default; - var opacity = _this.animate_value( scroll , scroll_eased , from , to , effect , 'opacity' ); - var translatey = _this.animate_value( scroll , scroll_eased , from , to , effect , 'translatey' ); - var translatex = _this.animate_value( scroll , scroll_eased , from , to , effect , 'translatex' ); - var translatez = _this.animate_value( scroll , scroll_eased , from , to , effect , 'translatez' ); - var rotatex = _this.animate_value( scroll , scroll_eased , from , to , effect , 'rotatex' ); - var rotatey = _this.animate_value( scroll , scroll_eased , from , to , effect , 'rotatey' ); - var rotatez = _this.animate_value( scroll , scroll_eased , from , to , effect , 'rotatez' ); - var scale = _this.animate_value( scroll , scroll_eased , from , to , effect , 'scale' ); - var scalex = _this.animate_value( scroll , scroll_eased , from , to , effect , 'scalex' ); - var scaley = _this.animate_value( scroll , scroll_eased , from , to , effect , 'scaley' ); - var scalez = _this.animate_value( scroll , scroll_eased , from , to , effect , 'scalez' ); + var value_target = effect.properties[ property ]; + + var forwards = ( to > from ) ? true : false; + // Allow use of px, %, vw and vh values on translate properties + var percentages = (property.indexOf('translate') >=0 && typeof value_target == 'string' && value_target.charAt(value_target.length - 1) == '%' ); + var px = (property.indexOf('translate') >=0 && typeof value_target == 'string' && value_target.substr(value_target.length - 2) == 'px' ); + var vw = (property.indexOf('translate') >=0 && typeof value_target == 'string' && value_target.substr(value_target.length - 2) == 'vw' ); + var vh = (property.indexOf('translate') >=0 && typeof value_target == 'string' && value_target.substr(value_target.length - 2) == 'vh' ); + + var translate_unit = 'px'; // default to pixel units + if ( px ) { + value_target = parseFloat(value_target.slice(0, -2), 10); + translate_unit = 'px'; + } + if ( percentages ) { + value_target = parseFloat(value_target.slice(0, -1), 10); + translate_unit = '%'; + } + if ( vw ) { + value_target = parseFloat(value_target.slice(0, -2), 10); + translate_unit = 'vw'; + } + if ( vh ) { + value_target = parseFloat(value_target.slice(0, -2), 10); + translate_unit = 'vh'; + } + + // Return boundary value if outside effect boundaries + + if( scroll < from && forwards ) { return value_default; } + if( scroll > to && forwards ) { return value_target; } + + if( scroll > from && !forwards ) { return value_default; } + if( scroll < to && !forwards ) { return value_target; } - // Override scale values + // Calculate new property value - if( 'scale' in effect.properties ) - { - scalex = scale; - scaley = scale; - scalez = scale; - } + var new_value = value_default + ( scroll_eased * ( value_target - value_default ) ); - // Update properties + // Round as required - effect.element.css( - { - 'opacity' : opacity, - 'transform' : 'translate3d( '+translatex+'px , '+translatey+'px , '+translatez+'px ) rotateX( '+rotatex+'deg ) rotateY( '+rotatey+'deg ) rotateZ( '+rotatez+'deg ) scale3d( '+scalex+' , '+scaley+' , '+scalez+' )' - } ); - } - } - } + switch( property ) + { + case 'opacity' : new_value = new_value.toFixed(2); break; + case 'translatex' : new_value = new_value.toFixed(2) + translate_unit; break; + case 'translatey' : new_value = new_value.toFixed(2) + translate_unit; break; + case 'translatez' : new_value = new_value.toFixed(2) + translate_unit; break; + case 'rotatex' : new_value = new_value.toFixed(1) + 'deg'; break; + case 'rotatey' : new_value = new_value.toFixed(1) + 'deg'; break; + case 'rotatez' : new_value = new_value.toFixed(1) + 'deg'; break; + case 'scale' : new_value = new_value.toFixed(3); break; + default : break; + } + + // Done + + return new_value; + } + + // ---------------------------------------------------------------------------------------------------- + // Update viewport position + + _this.update_viewport_position = function() + { + _this.viewport_top = $window.scrollTop(); + _this.viewport_bottom = _this.viewport_top + _this.viewport_height; + } + + // ---------------------------------------------------------------------------------------------------- + // Update list of elements in view + + _this.update_elements_in_view = function() + { + _this.elements_in_view = []; + + var elements_length = _this.elements.length; + + for( var i=0 ; i _this.viewport_top ) ) + { + _this.elements_in_view.push( _this.elements[i] ); + } + } + } - // ---------------------------------------------------------------------------------------------------- - // Calculate property values + // ---------------------------------------------------------------------------------------------------- + // Stuff to do on resize - _this.animate_value = function( scroll , scroll_eased , from , to , effect , property ) - { - var value_default = _this.property_defaults[ property ]; + _this.on_resize = function() + { + // Update viewport/element data + + _this.update_viewport(); + _this.update_element_heights(); - // Return default value if property is not animated + // Update display - if( !( property in effect.properties ) ) return value_default; + _this.update_viewport_position(); + _this.update_elements_in_view(); + _this.animate(); + } + + // ---------------------------------------------------------------------------------------------------- + // Update viewport parameters + + _this.update_viewport = function() + { + _this.body_height = $document.height(); + _this.viewport_height = $window.height(); + } + + // ---------------------------------------------------------------------------------------------------- + // Update height of animated elements - var value_target = effect.properties[ property ]; + _this.update_element_heights = function() + { + var elements_length = _this.elements.length; - var forwards = ( to > from ) ? true : false; + for( var i=0 ; i to && forwards ) { return value_target; } + // ---------------------------------------------------------------------------------------------------- + // Bind initialisation - if( scroll > from && !forwards ) { return value_default; } - if( scroll < to && !forwards ) { return value_target; } + $('document').ready(function(){ _this.init(); }); - // Calculate new property value + // ---------------------------------------------------------------------------------------------------- - var new_value = value_default + ( scroll_eased * ( value_target - value_default ) ); + return _this; - // Round as required - - switch( property ) - { - case 'opacity' : new_value = new_value.toFixed(2); break; - case 'translatex' : new_value = new_value.toFixed(0); break; - case 'translatey' : new_value = new_value.toFixed(0); break; - case 'translatez' : new_value = new_value.toFixed(0); break; - case 'rotatex' : new_value = new_value.toFixed(1); break; - case 'rotatey' : new_value = new_value.toFixed(1); break; - case 'rotatez' : new_value = new_value.toFixed(1); break; - case 'scale' : new_value = new_value.toFixed(3); break; - default : break; - } - - // Done - - return new_value; - } - - // ---------------------------------------------------------------------------------------------------- - // Update viewport position - - _this.update_viewport_position = function() - { - _this.viewport_top = $window.scrollTop(); - _this.viewport_bottom = _this.viewport_top + _this.viewport_height; - } - - // ---------------------------------------------------------------------------------------------------- - // Update list of elements in view - - _this.update_elements_in_view = function() - { - _this.elements_in_view = []; - - var elements_length = _this.elements.length; - - for( var i=0 ; i _this.viewport_top ) ) - { - _this.elements_in_view.push( _this.elements[i] ); - } - } - } - - // ---------------------------------------------------------------------------------------------------- - // Stuff to do on resize - - _this.on_resize = function() - { - // Update viewport/element data - - _this.update_viewport(); - _this.update_element_heights(); - - // Update display - - _this.update_viewport_position(); - _this.update_elements_in_view(); - _this.animate(); - } - - // ---------------------------------------------------------------------------------------------------- - // Update viewport parameters - - _this.update_viewport = function() - { - _this.body_height = $document.height(); - _this.viewport_height = $window.height(); - } - - // ---------------------------------------------------------------------------------------------------- - // Update height of animated elements - - _this.update_element_heights = function() - { - var elements_length = _this.elements.length; - - for( var i=0 ; i(d.body_height-d.viewport_height)){n=d.body_height-d.viewport_height}}var g=(d.viewport_top-r)/(n-r);var x=w.from;var j=w.to;var o=j-x;var k=(g-x)/o;var v=w.easing(k);var l=d.animate_value(g,v,x,j,w,"opacity");var t=d.animate_value(g,v,x,j,w,"translatey");var u=d.animate_value(g,v,x,j,w,"translatex");var s=d.animate_value(g,v,x,j,w,"translatez");var B=d.animate_value(g,v,x,j,w,"rotatex");var z=d.animate_value(g,v,x,j,w,"rotatey");var y=d.animate_value(g,v,x,j,w,"rotatez");var E=d.animate_value(g,v,x,j,w,"scale");var q=d.animate_value(g,v,x,j,w,"scalex");var p=d.animate_value(g,v,x,j,w,"scaley");var m=d.animate_value(g,v,x,j,w,"scalez");if("scale" in w.properties){q=E;p=E;m=E}w.element.css({opacity:l,transform:"translate3d( "+u+"px , "+t+"px , "+s+"px ) rotateX( "+B+"deg ) rotateY( "+z+"deg ) rotateZ( "+y+"deg ) scale3d( "+q+" , "+p+" , "+m+" )"})}}};d.animate_value=function(i,h,j,k,n,m){var g=d.property_defaults[m];if(!(m in n.properties)){return g}var e=n.properties[m];var f=(k>j)?true:false;if(ik&&f){return e}if(i>j&&!f){return g}if(id.viewport_top)){d.elements_in_view.push(d.elements[e])}}};d.on_resize=function(){d.update_viewport();d.update_element_heights();d.update_viewport_position();d.update_elements_in_view();d.animate()};d.update_viewport=function(){d.body_height=c.height();d.viewport_height=b.height()};d.update_element_heights=function(){var g=d.elements.length;for(var f=0;ft.body_height-t.viewport_height&&(l=t.body_height-t.viewport_height));var p=(t.viewport_top-s)/(l-s),m=r.from,c=r.to,_=(p-m)/(c-m),u=r.easing(_),v=t.animate_value(p,u,m,c,r,"opacity"),d=t.animate_value(p,u,m,c,r,"translatey"),f=t.animate_value(p,u,m,c,r,"translatex"),h=t.animate_value(p,u,m,c,r,"translatez"),w=t.animate_value(p,u,m,c,r,"rotatex"),g=t.animate_value(p,u,m,c,r,"rotatey"),y=t.animate_value(p,u,m,c,r,"rotatez"),x=t.animate_value(p,u,m,c,r,"scale"),z=t.animate_value(p,u,m,c,r,"scalex"),b=t.animate_value(p,u,m,c,r,"scaley"),F=t.animate_value(p,u,m,c,r,"scalez");"scale"in r.properties&&(z=x,b=x,F=x),r.element.css({opacity:v,transform:"translate3d( "+f+", "+d+", "+h+") rotateX( "+w+") rotateY( "+g+") rotateZ( "+y+") scale3d( "+z+" , "+b+" , "+F+" )"})}},t.animate_value=function(e,a,n,i,o,r){var s=t.property_defaults[r];if(!(r in o.properties))return s;var l=o.properties[r],p=i>n,m=r.indexOf("translate")>=0&&"string"==typeof l&&"%"==l.charAt(l.length-1),c=r.indexOf("translate")>=0&&"string"==typeof l&&"px"==l.substr(l.length-2),_=r.indexOf("translate")>=0&&"string"==typeof l&&"vw"==l.substr(l.length-2),u=r.indexOf("translate")>=0&&"string"==typeof l&&"vh"==l.substr(l.length-2),v="px";if(c&&(l=parseFloat(l.slice(0,-2),10),v="px"),m&&(l=parseFloat(l.slice(0,-1),10),v="%"),_&&(l=parseFloat(l.slice(0,-2),10),v="vw"),u&&(l=parseFloat(l.slice(0,-2),10),v="vh"),ei&&p)return l;if(e>n&&!p)return s;if(et.viewport_top&&t.elements_in_view.push(t.elements[a])},t.on_resize=function(){t.update_viewport(),t.update_element_heights(),t.update_viewport_position(),t.update_elements_in_view(),t.animate()},t.update_viewport=function(){t.body_height=a.height(),t.viewport_height=n.height()},t.update_element_heights=function(){for(var e=t.elements.length,a=0;a Date: Sun, 28 Oct 2018 18:26:17 +0200 Subject: [PATCH 2/3] added change from seapage - issue #56 --- jquery.scrollme.js | 1 + 1 file changed, 1 insertion(+) diff --git a/jquery.scrollme.js b/jquery.scrollme.js index 1483644..06d1215 100644 --- a/jquery.scrollme.js +++ b/jquery.scrollme.js @@ -318,6 +318,7 @@ var scrollme = ( function( $ ) effect.element.css( { 'opacity' : opacity, + 'will-change' : 'transform', // 'transform' : 'translate3d( '+translatex+'px , '+translatey+'px , '+translatez+'px ) rotateX( '+rotatex+'deg ) rotateY( '+rotatey+'deg ) rotateZ( '+rotatez+'deg ) scale3d( '+scalex+' , '+scaley+' , '+scalez+' )' 'transform' : 'translate3d( '+translatex+', '+translatey+', '+translatez+') rotateX( '+rotatex+') rotateY( '+rotatey+') rotateZ( '+rotatez+') scale3d( '+scalex+' , '+scaley+' , '+scalez+' )' } ); From b9c5192c1fccd0754c9e98cd51dd3188b7c2c07a Mon Sep 17 00:00:00 2001 From: grisnakh Date: Sun, 28 Oct 2018 18:32:01 +0200 Subject: [PATCH 3/3] minify script --- jquery.scrollme.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.scrollme.min.js b/jquery.scrollme.min.js index 7f8a579..c56fd9c 100644 --- a/jquery.scrollme.min.js +++ b/jquery.scrollme.min.js @@ -3,4 +3,4 @@ // A jQuery plugin for adding simple scrolling effects to web pages // http://scrollme.nckprsn.com // ---------------------------------------------------------------------------------------------------- -var scrollme=function(e){var t={},a=e(document),n=e(window);return t.body_height=0,t.viewport_height=0,t.viewport_top=0,t.viewport_bottom=0,t.viewport_top_previous=-1,t.elements=[],t.elements_in_view=[],t.property_defaults={opacity:1,translatex:0,translatey:0,translatez:0,rotatex:0,rotatey:0,rotatez:0,scale:1,scalex:1,scaley:1,scalez:1},t.scrollme_selector=".scrollme",t.animateme_selector=".animateme",t.update_interval=10,t.easing_functions={linear:function(e){return e},easeout:function(e){return e*e*e},easein:function(e){return 1-(e=1-e)*e*e},easeinout:function(e){return e<.5?4*e*e*e:1-4*(e=1-e)*e*e}},t.init_events=["ready","page:load","page:change"],t.init_if=function(){return!0},t.init=function(){return!!t.init_if()&&(t.init_elements(),t.on_resize(),n.on("resize orientationchange",function(){t.on_resize()}),e(document).ready(function(){setTimeout(function(){t.on_resize()},100)}),setInterval(t.update,t.update_interval),!0)},t.init_elements=function(){e(t.scrollme_selector).each(function(){var a={};a.element=e(this);var n=[];e(this).find(t.animateme_selector).addBack(t.animateme_selector).each(function(){var a={};a.element=e(this),a.when=a.element.data("when"),a.from=a.element.data("from"),a.to=a.element.data("to"),a.element.is("[data-crop]")?a.crop=a.element.data("crop"):a.crop=!0,a.element.is("[data-easing]")?a.easing=t.easing_functions[a.element.data("easing")]:a.easing=t.easing_functions.easeout;var i={};a.element.is("[data-opacity]")&&(i.opacity=a.element.data("opacity")),a.element.is("[data-translatex]")&&(i.translatex=a.element.data("translatex")),a.element.is("[data-translatey]")&&(i.translatey=a.element.data("translatey")),a.element.is("[data-translatez]")&&(i.translatez=a.element.data("translatez")),a.element.is("[data-rotatex]")&&(i.rotatex=a.element.data("rotatex")),a.element.is("[data-rotatey]")&&(i.rotatey=a.element.data("rotatey")),a.element.is("[data-rotatez]")&&(i.rotatez=a.element.data("rotatez")),a.element.is("[data-scale]")&&(i.scale=a.element.data("scale")),a.element.is("[data-scalex]")&&(i.scalex=a.element.data("scalex")),a.element.is("[data-scaley]")&&(i.scaley=a.element.data("scaley")),a.element.is("[data-scalez]")&&(i.scalez=a.element.data("scalez")),a.properties=i,n.push(a)}),a.effects=n,t.elements.push(a)})},t.update=function(){window.requestAnimationFrame(function(){t.update_viewport_position(),t.viewport_top_previous!=t.viewport_top&&(t.update_elements_in_view(),t.animate()),t.viewport_top_previous=t.viewport_top})},t.animate=function(){for(var e=t.elements_in_view.length,a=0;at.body_height-t.viewport_height&&(l=t.body_height-t.viewport_height));var p=(t.viewport_top-s)/(l-s),m=r.from,c=r.to,_=(p-m)/(c-m),u=r.easing(_),v=t.animate_value(p,u,m,c,r,"opacity"),d=t.animate_value(p,u,m,c,r,"translatey"),f=t.animate_value(p,u,m,c,r,"translatex"),h=t.animate_value(p,u,m,c,r,"translatez"),w=t.animate_value(p,u,m,c,r,"rotatex"),g=t.animate_value(p,u,m,c,r,"rotatey"),y=t.animate_value(p,u,m,c,r,"rotatez"),x=t.animate_value(p,u,m,c,r,"scale"),z=t.animate_value(p,u,m,c,r,"scalex"),b=t.animate_value(p,u,m,c,r,"scaley"),F=t.animate_value(p,u,m,c,r,"scalez");"scale"in r.properties&&(z=x,b=x,F=x),r.element.css({opacity:v,transform:"translate3d( "+f+", "+d+", "+h+") rotateX( "+w+") rotateY( "+g+") rotateZ( "+y+") scale3d( "+z+" , "+b+" , "+F+" )"})}},t.animate_value=function(e,a,n,i,o,r){var s=t.property_defaults[r];if(!(r in o.properties))return s;var l=o.properties[r],p=i>n,m=r.indexOf("translate")>=0&&"string"==typeof l&&"%"==l.charAt(l.length-1),c=r.indexOf("translate")>=0&&"string"==typeof l&&"px"==l.substr(l.length-2),_=r.indexOf("translate")>=0&&"string"==typeof l&&"vw"==l.substr(l.length-2),u=r.indexOf("translate")>=0&&"string"==typeof l&&"vh"==l.substr(l.length-2),v="px";if(c&&(l=parseFloat(l.slice(0,-2),10),v="px"),m&&(l=parseFloat(l.slice(0,-1),10),v="%"),_&&(l=parseFloat(l.slice(0,-2),10),v="vw"),u&&(l=parseFloat(l.slice(0,-2),10),v="vh"),ei&&p)return l;if(e>n&&!p)return s;if(et.viewport_top&&t.elements_in_view.push(t.elements[a])},t.on_resize=function(){t.update_viewport(),t.update_element_heights(),t.update_viewport_position(),t.update_elements_in_view(),t.animate()},t.update_viewport=function(){t.body_height=a.height(),t.viewport_height=n.height()},t.update_element_heights=function(){for(var e=t.elements.length,a=0;at.body_height-t.viewport_height&&(l=t.body_height-t.viewport_height));var p=(t.viewport_top-s)/(l-s),m=r.from,c=r.to,_=(p-m)/(c-m),u=r.easing(_),v=t.animate_value(p,u,m,c,r,"opacity"),d=t.animate_value(p,u,m,c,r,"translatey"),f=t.animate_value(p,u,m,c,r,"translatex"),h=t.animate_value(p,u,m,c,r,"translatez"),w=t.animate_value(p,u,m,c,r,"rotatex"),g=t.animate_value(p,u,m,c,r,"rotatey"),y=t.animate_value(p,u,m,c,r,"rotatez"),x=t.animate_value(p,u,m,c,r,"scale"),z=t.animate_value(p,u,m,c,r,"scalex"),b=t.animate_value(p,u,m,c,r,"scaley"),F=t.animate_value(p,u,m,c,r,"scalez");"scale"in r.properties&&(z=x,b=x,F=x),r.element.css({opacity:v,"will-change":"transform",transform:"translate3d( "+f+", "+d+", "+h+") rotateX( "+w+") rotateY( "+g+") rotateZ( "+y+") scale3d( "+z+" , "+b+" , "+F+" )"})}},t.animate_value=function(e,a,n,i,o,r){var s=t.property_defaults[r];if(!(r in o.properties))return s;var l=o.properties[r],p=i>n,m=r.indexOf("translate")>=0&&"string"==typeof l&&"%"==l.charAt(l.length-1),c=r.indexOf("translate")>=0&&"string"==typeof l&&"px"==l.substr(l.length-2),_=r.indexOf("translate")>=0&&"string"==typeof l&&"vw"==l.substr(l.length-2),u=r.indexOf("translate")>=0&&"string"==typeof l&&"vh"==l.substr(l.length-2),v="px";if(c&&(l=parseFloat(l.slice(0,-2),10),v="px"),m&&(l=parseFloat(l.slice(0,-1),10),v="%"),_&&(l=parseFloat(l.slice(0,-2),10),v="vw"),u&&(l=parseFloat(l.slice(0,-2),10),v="vh"),ei&&p)return l;if(e>n&&!p)return s;if(et.viewport_top&&t.elements_in_view.push(t.elements[a])},t.on_resize=function(){t.update_viewport(),t.update_element_heights(),t.update_viewport_position(),t.update_elements_in_view(),t.animate()},t.update_viewport=function(){t.body_height=a.height(),t.viewport_height=n.height()},t.update_element_heights=function(){for(var e=t.elements.length,a=0;a