diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b512c09 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/bower.json b/bower.json index 9ad1efa..378faa6 100644 --- a/bower.json +++ b/bower.json @@ -1,26 +1,26 @@ { "name": "scrollme", "description": "A jQuery plugin for adding simple scrolling effects to web pages.", - "version": "1.1.0", - "main": "jquery.scrollme.min.js", - "ignore": - [ + "version": "1.1.1", + "main": "jquery.scrollme.js", + "ignore": [ "scrollme.jquery.json" ], - "keywords": - [ + "keywords": [ "animation", "scrolling" ], - "authors": - [ + "authors": [ { "name": "Nick Pearson", "url": "http://nckprsn.com" + }, + { + "name": "dotnetCarpenter", + "url": "https://github.com/dotnetCarpenter" } ], - "license": - [ + "license": [ { "type": "GPLv3", "url": "http://www.gnu.org/licenses/gpl-3.0.html" @@ -31,8 +31,7 @@ "type": "git", "url": "git://github.com/nckprsn/scrollme" }, - "dependencies": - { + "dependencies": { "jquery": ">=1.8" } } diff --git a/jquery.scrollme.js b/jquery.scrollme.js index cffb929..c61c64a 100644 --- a/jquery.scrollme.js +++ b/jquery.scrollme.js @@ -87,7 +87,8 @@ var scrollme = ( function( $ ) _this.init_events = [ - 'ready', + 'load', + 'DOMContentLoaded', 'page:load', // Turbolinks 'page:change' // Turbolinks ]; @@ -120,7 +121,7 @@ var scrollme = ( function( $ ) // Recalculate heights & positions when page is fully loaded + a bit just in case - $window.load( function(){ setTimeout( function(){ _this.on_resize(); } , 100 ) }); + $window.on('load', function(){ setTimeout( function(){ _this.on_resize(); } , 100 ) }); // Start animating @@ -444,7 +445,7 @@ var scrollme = ( function( $ ) // ---------------------------------------------------------------------------------------------------- // Bind initialisation - $document.on( _this.init_events.join( ' ' ) , function(){ _this.init(); } ); + $document.one( _this.init_events.join( ' ' ) , function(){ _this.init(); }); // ---------------------------------------------------------------------------------------------------- diff --git a/jquery.scrollme.min.js b/jquery.scrollme.min.js index d82af9a..2e19f24 100644 --- a/jquery.scrollme.min.js +++ b/jquery.scrollme.min.js @@ -1,6 +1 @@ -// ---------------------------------------------------------------------------------------------------- -// ScrollMe -// A jQuery plugin for adding simple scrolling effects to web pages -// http://scrollme.nckprsn.com -// ---------------------------------------------------------------------------------------------------- -var scrollme=(function(a){var d={};var c=a(document);var b=a(window);d.body_height=0;d.viewport_height=0;d.viewport_top=0;d.viewport_bottom=0;d.viewport_top_previous=-1;d.elements=[];d.elements_in_view=[];d.property_defaults={opacity:1,translatex:0,translatey:0,translatez:0,rotatex:0,rotatey:0,rotatez:0,scale:1,scalex:1,scaley:1,scalez:1};d.scrollme_selector=".scrollme";d.animateme_selector=".animateme";d.update_interval=10;d.easing_functions={linear:function(e){return e},easeout:function(e){return e*e*e},easein:function(e){e=1-e;return 1-(e*e*e)},easeinout:function(e){if(e<0.5){return(4*e*e*e)}else{e=1-e;return 1-(4*e*e*e)}}};d.init_events=["ready","page:load","page:change"];d.init_if=function(){return true};d.init=function(){if(!d.init_if()){return false}d.init_elements();d.on_resize();b.on("resize orientationchange",function(){d.on_resize()});b.load(function(){setTimeout(function(){d.on_resize()},100)});setInterval(d.update,d.update_interval);return true};d.init_elements=function(){a(d.scrollme_selector).each(function(){var e={};e.element=a(this);var f=[];a(this).find(d.animateme_selector).addBack(d.animateme_selector).each(function(){var h={};h.element=a(this);h.when=h.element.data("when");h.from=h.element.data("from");h.to=h.element.data("to");if(h.element.is("[data-crop]")){h.crop=h.element.data("crop")}else{h.crop=true}if(h.element.is("[data-easing]")){h.easing=d.easing_functions[h.element.data("easing")]}else{h.easing=d.easing_functions.easeout}var g={};if(h.element.is("[data-opacity]")){g.opacity=h.element.data("opacity")}if(h.element.is("[data-translatex]")){g.translatex=h.element.data("translatex")}if(h.element.is("[data-translatey]")){g.translatey=h.element.data("translatey")}if(h.element.is("[data-translatez]")){g.translatez=h.element.data("translatez")}if(h.element.is("[data-rotatex]")){g.rotatex=h.element.data("rotatex")}if(h.element.is("[data-rotatey]")){g.rotatey=h.element.data("rotatey")}if(h.element.is("[data-rotatez]")){g.rotatez=h.element.data("rotatez")}if(h.element.is("[data-scale]")){g.scale=h.element.data("scale")}if(h.element.is("[data-scalex]")){g.scalex=h.element.data("scalex")}if(h.element.is("[data-scaley]")){g.scaley=h.element.data("scaley")}if(h.element.is("[data-scalez]")){g.scalez=h.element.data("scalez")}h.properties=g;f.push(h)});e.effects=f;d.elements.push(e)})};d.update=function(){window.requestAnimationFrame(function(){d.update_viewport_position();if(d.viewport_top_previous!=d.viewport_top){d.update_elements_in_view();d.animate()}d.viewport_top_previous=d.viewport_top})};d.animate=function(){var C=d.elements_in_view.length;for(var A=0;A(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;fx?4*x*x*x:(x=1-x,1-4*x*x*x)}},_this.init_events=["load","DOMContentLoaded","page:load","page:change"],_this.init_if=function(){return!0},_this.init=function(){return _this.init_if()?(_this.init_elements(),_this.on_resize(),$window.on("resize orientationchange",function(){_this.on_resize()}),$window.on("load",function(){setTimeout(function(){_this.on_resize()},100)}),setInterval(_this.update,_this.update_interval),!0):!1},_this.init_elements=function(){$(_this.scrollme_selector).each(function(){var element={};element.element=$(this);var effects=[];$(this).find(_this.animateme_selector).addBack(_this.animateme_selector).each(function(){var effect={};effect.element=$(this),effect.when=effect.element.data("when"),effect.from=effect.element.data("from"),effect.to=effect.element.data("to"),effect.element.is("[data-crop]")?effect.crop=effect.element.data("crop"):effect.crop=!0,effect.element.is("[data-easing]")?effect.easing=_this.easing_functions[effect.element.data("easing")]:effect.easing=_this.easing_functions.easeout;var properties={};effect.element.is("[data-opacity]")&&(properties.opacity=effect.element.data("opacity")),effect.element.is("[data-translatex]")&&(properties.translatex=effect.element.data("translatex")),effect.element.is("[data-translatey]")&&(properties.translatey=effect.element.data("translatey")),effect.element.is("[data-translatez]")&&(properties.translatez=effect.element.data("translatez")),effect.element.is("[data-rotatex]")&&(properties.rotatex=effect.element.data("rotatex")),effect.element.is("[data-rotatey]")&&(properties.rotatey=effect.element.data("rotatey")),effect.element.is("[data-rotatez]")&&(properties.rotatez=effect.element.data("rotatez")),effect.element.is("[data-scale]")&&(properties.scale=effect.element.data("scale")),effect.element.is("[data-scalex]")&&(properties.scalex=effect.element.data("scalex")),effect.element.is("[data-scaley]")&&(properties.scaley=effect.element.data("scaley")),effect.element.is("[data-scalez]")&&(properties.scalez=effect.element.data("scalez")),effect.properties=properties,effects.push(effect)}),element.effects=effects,_this.elements.push(element)})},_this.update=function(){window.requestAnimationFrame(function(){_this.update_viewport_position(),_this.viewport_top_previous!=_this.viewport_top&&(_this.update_elements_in_view(),_this.animate()),_this.viewport_top_previous=_this.viewport_top})},_this.animate=function(){for(var elements_in_view_length=_this.elements_in_view.length,i=0;elements_in_view_length>i;i++)for(var element=_this.elements_in_view[i],effects_length=element.effects.length,e=0;effects_length>e;e++){var effect=element.effects[e];switch(effect.when){case"view":case"span":var start=element.top-_this.viewport_height,end=element.bottom;break;case"exit":var start=element.bottom-_this.viewport_height,end=element.bottom;break;default:var start=element.top-_this.viewport_height,end=element.top}effect.crop&&(0>start&&(start=0),end>_this.body_height-_this.viewport_height&&(end=_this.body_height-_this.viewport_height));var scroll=(_this.viewport_top-start)/(end-start),from=effect.from,to=effect.to,length=to-from,scroll_relative=(scroll-from)/length,scroll_eased=effect.easing(scroll_relative),opacity=_this.animate_value(scroll,scroll_eased,from,to,effect,"opacity"),translatey=_this.animate_value(scroll,scroll_eased,from,to,effect,"translatey"),translatex=_this.animate_value(scroll,scroll_eased,from,to,effect,"translatex"),translatez=_this.animate_value(scroll,scroll_eased,from,to,effect,"translatez"),rotatex=_this.animate_value(scroll,scroll_eased,from,to,effect,"rotatex"),rotatey=_this.animate_value(scroll,scroll_eased,from,to,effect,"rotatey"),rotatez=_this.animate_value(scroll,scroll_eased,from,to,effect,"rotatez"),scale=_this.animate_value(scroll,scroll_eased,from,to,effect,"scale"),scalex=_this.animate_value(scroll,scroll_eased,from,to,effect,"scalex"),scaley=_this.animate_value(scroll,scroll_eased,from,to,effect,"scaley"),scalez=_this.animate_value(scroll,scroll_eased,from,to,effect,"scalez");"scale"in effect.properties&&(scalex=scale,scaley=scale,scalez=scale),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+" )"})}},_this.animate_value=function(scroll,scroll_eased,from,to,effect,property){var value_default=_this.property_defaults[property];if(!(property in effect.properties))return value_default;var value_target=effect.properties[property],forwards=to>from;if(from>scroll&&forwards)return value_default;if(scroll>to&&forwards)return value_target;if(scroll>from&&!forwards)return value_default;if(to>scroll&&!forwards)return value_target;var new_value=value_default+scroll_eased*(value_target-value_default);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)}return new_value},_this.update_viewport_position=function(){_this.viewport_top=$window.scrollTop(),_this.viewport_bottom=_this.viewport_top+_this.viewport_height},_this.update_elements_in_view=function(){_this.elements_in_view=[];for(var elements_length=_this.elements.length,i=0;elements_length>i;i++)_this.elements[i].top<_this.viewport_bottom&&_this.elements[i].bottom>_this.viewport_top&&_this.elements_in_view.push(_this.elements[i])},_this.on_resize=function(){_this.update_viewport(),_this.update_element_heights(),_this.update_viewport_position(),_this.update_elements_in_view(),_this.animate()},_this.update_viewport=function(){_this.body_height=$document.height(),_this.viewport_height=$window.height()},_this.update_element_heights=function(){for(var elements_length=_this.elements.length,i=0;elements_length>i;i++){var element_height=_this.elements[i].element.outerHeight(),position=_this.elements[i].element.offset();_this.elements[i].height=element_height,_this.elements[i].top=position.top,_this.elements[i].bottom=position.top+element_height}},$document.one(_this.init_events.join(" "),function(){_this.init()}),_this}(jQuery); diff --git a/package.json b/package.json new file mode 100644 index 0000000..77219c4 --- /dev/null +++ b/package.json @@ -0,0 +1,39 @@ +{ + "name": "scrollme", + "version": "1.1.1", + "description": "A jQuery plugin for adding simple scrolling effects to web pages.", + "main": "jquery.scrollme.js", + "keywords": [ + "animation", + "scrolling" + ], + "authors": [ + { + "name": "Nick Pearson", + "url": "http://nckprsn.com" + }, + { + "name": "dotnetCarpenter", + "url": "https://github.com/dotnetCarpenter" + } + ], + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "build": "uglifyjs jquery.scrollme.js --compress > jquery.scrollme.min.js" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/nckprsn/scrollme.git" + }, + "license": "GPLv3", + "bugs": { + "url": "https://github.com/nckprsn/scrollme/issues" + }, + "homepage": "https://github.com/nckprsn/scrollme#readme", + "dependencies": { + "jquery": ">=1.8" + }, + "devDependencies": { + "uglify-js": "^2.6.2" + } +} diff --git a/scrollme.jquery.json b/scrollme.jquery.json index c57882d..dfba8ae 100644 --- a/scrollme.jquery.json +++ b/scrollme.jquery.json @@ -7,7 +7,7 @@ "animation", "scrolling" ], - "version": "1.1.0", + "version": "1.1.1", "author": { "name": "Nick Pearson",