javascript - How to reverse a css transistion on scroll for fly in / fly out effect -

i trying fly-in / fly- out effect happening

scroll down - animate in

scroll-up animate out

to similar effect nizo website

http://nizoapp.com/

i have used code found on stackoverflow "fade in element on scroll down using css" determine whether element on screen, in viewport, , animate it.

   $(window).scroll(function () {          /* check location of each desired element */         $('.article').each(function (i) {              var bottom_of_object = $(this).position().top + $(this).outerheight();             var bottom_of_window = $(window).scrolltop() + $(window).height();              /* if object visible in window, fade it */             if (bottom_of_window > bottom_of_object) {                  $(this).animate({                     'opacity': '1'                 }, 500);              }          });      }); 

which works quite well.

i have added demo page, , modified it.

http://saigonhousefinder.com/potteryone/fadinonscroll.html

(probably not live long)

i have used css transitions effect looking for. fly-in fly-out etc etc

and found..... function same thing

function isscrolledintoview(elem) {     var docviewtop = $(window).scrolltop();     var docviewbottom = docviewtop + $(window).height();     var elemtop = $(elem).offset().top;     return ((elemtop <= docviewbottom) && (elemtop >= docviewtop)); } 

anyway.......

i cant animations work when scrolling down, fly-in.

but cannot animations go in reverse when fly out on scroll

i thought easiest way detect if scrolling down of up, found method / function

(function () {     var previousscroll = 0;      $(window).scroll(function () {        var currentscroll = $(this).scrolltop();        if (currentscroll > previousscroll){      $("#div").fadein("slow");        }        else {    $("#div").fadeout("slow");           }        previousscroll = currentscroll;     }); }()); 

which works well, cannot working.

at point can detect when element visible on screen add effect it.

what need detect when same element beginning go off screen , apply effect it.

any on how working great

have nice day

that's neat demo , great concept! played around code , seems there. need detect when top of screen meets top of element, calculate offset once when page loaded. added 20px threshold kicks in bit early. let me know if helps, can tweaked depending on how , when want call it. here simple js fiddle demo http://jsfiddle.net/xhahr/23/

(function () {    var previousscroll = 0;   var elemtop = $("#div").offset().top;   $("#div").fadeout();    $(window).scroll(function () {    var currentscroll = $(this).scrolltop();     if (currentscroll > previousscroll){            if(elemtop -20 > currentscroll){                $("#div").fadein("slow");            }    }    else {        if(elemtop - 20 > currentscroll){            $("#div").fadeout("slow");        }    }    previousscroll = currentscroll;   }); }());