Fly-in fly-out effect for scroll jquery css animation

Question

I'm trying to make elements on my site take off and fly off on a scroll.

This is the effect I'm looking for.

http://nizoapp.com/

The effect on nizo site is done using jquery, I think

I tried many different ways to make this effect work: Skrollr, scrollorama and jquery animate, as well as css transitions, etc. etc.

I decided to use css transitions as crazy "css animation cheat sheet" (google it)

After a lot of effort and some borrowed code, I have half the work, as in it I can get elements for entry on the scroll down, but not to fly back on the scroll.

This is jsfiddle with his half work

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

The code...

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"); } }); }); // this is the function to check if is scroll down or up, but I cannot get it to trigger the fly in effect, (function () { var previousScroll = 0; $(window).scroll(function () { var currentScroll = $(this).scrollTop(); if (currentScroll > previousScroll){ // i figure to put the fly-in code here } else { // and the fly-out code here } previousScroll = currentScroll; }); }()); 

I tried to use another function (piece of code) to check if the scrollbar scrolls up or up, but I cannot get it to work with existing code.

Any help to get this job would be awesome

A good day

I will send the solution one day, if I can understand it, of course, someone else would like to know

Answer 1

After borrowing some code from tympanus.net and using modernizer, I came up with this .

I also tried different approaches, but all of them had some drawbacks, so I found a better approach to using the sample code and the provided modernizer JS library.

Answer 2

The trick, knowing whether you are scrolling up or down, is not to ask. Make it relational using the top offset of the corresponding elements. Then it is as simple as> or <, for the most part.

Although if you want to get the current direction, you can always record the last scroll position and compare it with the current one.

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

Like the answer here .

I like to trigger events based on the size of the screen and the position of the item on the screen, so it doesn’t matter if it follows the same rules up and down. Thus, instead of asking up or down, he simply asks if it scrolls and performs accordingly.

If you need me to make changes to my violin for you, just let me know what you want. I just made a violin because of the terrible work they did on tympanus.net as an example. You are not doing a tutorial to perform a simple task on 2 js pages, which is unnecessary and does not contain any instructions other than "hey, do you want to do this?" Copy and paste these things that I have compiled that do not have a clear course of action and too much code to quickly digest. "Which does not help anyone learn.