Added mobile scroll events

animations trigger without emoving finger from screen. yay!

README.md

@@ -10,7 +10,7 @@ Config
 
 DivPeek has 4 configurable options:
 
-The first is an array of DOM elements to track. These do not have to be divs, they can be anything, alle they need is a unique ID.
+The first is an array of DOM elements to track. These do not have to be divs, they can be anything, all they need is a unique ID.
 
 	var elementsToTrack = ["#div1","#div2","#div3"];
 
@@ -58,10 +58,15 @@ If some ancient browser doesn't support JS, the user is stuck with the default s
 the height of the element will be 200px, whether your browser supports JS or not. Above I've set the 'outViewPort'-class to 0 height. As soon as the page is loaded and a scroll occurs this will happen outside of the
 viewport, and when the element enters the viewport it will animate back to default state. So a good idea would be to use the second method.
 
+Changelog
+---------
+v1.1: added touch-scroll events
+v1.0: initial project
 
 Roadmap
 -------
-This is just a first version, so I'll probably think of all kinds of cool stuff to to with it.
+- check in/out viewport from top too
+- option to only animate once, then keep in final state
 
 
 

js/divPeek.js

@@ -2,7 +2,7 @@
 //(see https://github.com/davidhalford/DivPeek)
 //===============================================================================
 //CONFIG: 
-var elementsToTrack = ["#scrollfx1","#scrollfx2","#scrollfx3"];
+var elementsToTrack = ["#scrollfx1","#scrollfx2","#scrollfx3","#scrollfx4","#scrollfx5","#scrollfx6","#scrollfx7"];
 
 var pixelOffset = -24;
 var inClassName = "inViewPort";
@@ -29,8 +29,12 @@ function recalcVars(){
    	}
 }
 
+//catch window events
 $(window).resize(function(e){recalcVars();});
-$(window).scroll(function(e){recalcVars();});
+document.addEventListener("touchmove", ScrollStart, false);
+document.addEventListener("scroll", Scroll, false);
+function ScrollStart(){recalcVars();}
+function Scroll(){recalcVars();}
 
 //function that handles if an element is in the viewport or not 
 function checkInViewport(scrollBottom, domElement){

js/divPeek.min.js

@@ -2,13 +2,14 @@
 //(see https://github.com/davidhalford/DivPeek)
 //===============================================================================
 //CONFIG: 
-var elementsToTrack = ["#scrollfx1","#scrollfx2","#scrollfx3"];
+var elementsToTrack = ["#scrollfx1","#scrollfx2","#scrollfx3","#scrollfx4","#scrollfx5","#scrollfx6","#scrollfx7"];
 
 var pixelOffset = -24;
 var inClassName = "inViewPort";
 var outClassName = "outViewPort";
 //===============================================================================
-
 jQuery.fn.exists=function(){return this.length>0;}
 var viewPortHeight=$(window).height();var scrollFromTop=$(window).scrollTop();var scrollFromBottom=(parseInt(scrollFromTop)+parseInt(viewPortHeight));function recalcVars(){viewPortHeight=$(window).height();scrollFromTop=$(window).scrollTop();scrollFromBottom=(parseInt(scrollFromTop)+parseInt(viewPortHeight));for(var i=0;i<elementsToTrack.length;i++){if($(elementsToTrack[i]).exists()){checkInViewport(scrollFromBottom,elementsToTrack[i]);}}}
-$(window).resize(function(e){recalcVars();});$(window).scroll(function(e){recalcVars();});function checkInViewport(scrollBottom,domElement){var elementPos=$(domElement).offset().top;if((parseInt(scrollBottom)+parseInt(pixelOffset))>elementPos){$(domElement).addClass(inClassName).removeClass(outClassName);}else{$(domElement).removeClass(inClassName).addClass(outClassName);}}
+$(window).resize(function(e){recalcVars();});document.addEventListener("touchmove",ScrollStart,false);document.addEventListener("scroll",Scroll,false);function ScrollStart(){recalcVars();}
+function Scroll(){recalcVars();}
+function checkInViewport(scrollBottom,domElement){var elementPos=$(domElement).offset().top;if((parseInt(scrollBottom)+parseInt(pixelOffset))>elementPos){$(domElement).addClass(inClassName).removeClass(outClassName);}else{$(domElement).removeClass(inClassName).addClass(outClassName);}}