javascript - Fly-in Fly-out effect on scroll jquery css animation -

i trying make elements on site fly-in , fly-out on scroll.

this effect looking for.

http://nizoapp.com/

the effect in nizo site done jquery, think

i have tried many different ways effect working, skrollr, scrollorama, , jquery animate , css transitions etc etc etc

i decided use css transitions mad "css animation cheat sheet" (google it)

after lot of effort , borrowed code, have got half working, in, can elements fly-in on down scroll, not fly out on scroll.

this jsfiddle half working

http://jsfiddle.net/mrcharis/hjx3z/4/

the code is......

function isscrolledintoview(elem) {     var docviewtop = $(window).scrolltop();     var docviewbottom = docviewtop + $(window).height();     var elemtop = $(elem).offset().top;     return ((elemtop <= docviewbottom) && (elemtop >= docviewtop)); }       $(window).scroll(function () {      $('.box').each(function (i) {           if (isscrolledintoview(this)) {              $(this).addclass("slideright");          }       });  });     // function check if scroll down or up, cannot trigger fly in effect,   (function () {     var previousscroll = 0;      $(window).scroll(function () {        var currentscroll = $(this).scrolltop();        if (currentscroll > previousscroll){  // figure put fly-in code here           }        else {    // , fly-out code here               }        previousscroll = currentscroll;     }); }()); 

i have tried using function (code chunk) check if scrolling down or up, can't working existing code.

any working awesome

have nice day

i post solution 1 day, if can figure out, sure else know

the trick knowing whether you're scrolling or down not ask. make relational using top offset of elements in question. it's easy > or <, part.

though if want current direction record last scroll position , compare current one.

var before = 0; $(window).scroll(function(event){     var = $(this).scrolltop();     if (now > before){         //on down code     } else {         //on code     }     before = now; }); 

like answer here suggests.

i trigger events based on screen size , element position in screen, doesn't matter whether it's or down, follows same rules forwards , backwards. way instead of asking or down, asks if it's scrolling , executes accordingly.

if need me make changes fiddle you, let me know want happen. made fiddle because of horrible job did on tympanus.net example. don't make tutorial accomplish simple task 2 pages of js, that's unnecessary , doesn't provide instruction other "hey, want this? copy , paste these things put have no clear course of action, , way code digest quickly". doesn't learn.