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

admin管理员组

文章数量:1323714

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

/

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

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.

http://nizoapp./

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/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

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 4, 2013 at 13:52 Charis Ryan asked Sep 4, 2013 at 13:43 Charis RyanCharis Ryan 8511 gold badge33 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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 pare 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 example. You don't make a tutorial to acplish 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.

After some code borrowing from tympanus 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.

本文标签： javascriptFlyin Flyout effect on scroll jquery css animationStack Overflow