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

Question

I am trying to make the elements on my site fly-in and fly-out on scroll.

This is the effect I am looking for.

The effect in the nizo site is done with jquery, I think

I have tried many different ways to get this effect working, with Skrollr, scrollorama, and jquery animate and with css transitions etc etc etc

I decided to use css transitions as mad by the "css animation cheat sheet" (google it)

After a lot of effort and some borrowed code, I have got it half working, as in, I can get the elements to fly-in on down scroll, but not to fly back out on up scroll.

This is a jsfiddle with it 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");

        }


    });

});




// 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 have tried using another function (code chunk) to check if the scrolling is down or up, but i can't get it working with the existing code.

Any help to get this working would be awesome

Have a nice day

I will post the solution one day, if I can figure it out, sure someone else would like to know

Laniakea · Answer 1 · 2014-09-03T11:05:55.217

2

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

I tried different approaches as well but all of them turned out to have some flaws in them so I find best approach to be using the sample code and the already provided modernizer JS library.

edited Sep 03 '14 at 11:05

answered Sep 05 '13 at 10:05

Laniakea

894
8
27

Thanks for your effort, looks / works really great. Is quite a lot of coding, I found this jsfiddle.net/filever10/HKaC3 which does the same with a lot less code. Both are great, but I still would like to be able to use only a minimum of jquery, just to get window size / positions etc. Although I can use the code to do the job I need I would still like to know the answer to the questions, how to reverse the code I supplied to get the same css animation to fly-off on scroll down. Thanks a lot for your help. I will leave it as still not answered, very close. Cheers – Charis Ryan Sep 05 '13 at 12:50

score 2 · Answer 2 · edited May 23 '17 at 12:21

The trick to knowing whether you're scrolling up or down is not to ask. Make it relational by using the top offset of the elements in question. Then it's as easy as > or <, for the most part.

Though if you do want to get the current direction you could 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 suggests.

I like to trigger the events based on the screen size and the element position in the screen, so it doesn't matter whether it's up or down, it follows the same rules forwards and backwards. That way instead of asking up or down, it just asks if it's scrolling and executes it accordingly.

If you need me to make changes to my fiddle for you, just let me know what you want to happen. I only made the fiddle because of the horrible job they did on the tympanus.net example. You don't make a tutorial to accomplish a simple task 2 pages of js, that's unnecessary and it doesn't provide any instruction other than "hey, you want to do this? Then copy and paste these things I put together that have no clear course of action, and way too much code to digest quickly". Which doesn't help anyone learn.

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

2 Answers2