javascript - 滚动jquery css动画的飞入飞出效果

Question

我试图让我网站上的元素在滚动时飞入飞出。

这就是我要的效果。

http://nizoapp.com/

nizo网站里的效果我觉得是用jquery做的

我尝试了很多不同的方法来使这种效果发挥作用，使用 Skrollr、scrollorama 和 jquery animate 以及使用 css transitions 等等等等

我决定使用 css transitions，因为“css animation cheat sheet”(google it)让我疯狂

经过大量的努力和一些借用的代码，我已经完成了一半的工作，例如，我可以让元素在向下滚动时飞入，但不会在向上滚动时飞回。

这是一个半工作的 jsfiddle

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

代码是……

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;
    });
}());

我已经尝试使用另一个函数(代码块)来检查滚动是向下还是向上，但我无法使用现有代码让它工作。

如果能帮上忙，那就太棒了

祝你有个愉快的一天

有一天我会发布解决方案，如果我能弄清楚，肯定会有其他人想知道

Answer 1

知道您是向上滚动还是向下滚动的诀窍就是不问。通过使用相关元素的顶部偏移量使其相关。在大多数情况下，它就像 > 或 < 一样简单。

不过，如果您确实想获得当前方向，您可以随时记录最后一次滚动位置并将其与当前位置进行比较。

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

喜欢这个答案here建议。

我喜欢根据屏幕大小和元素在屏幕中的位置来触发事件，所以不管是向上还是向下，向前和向后遵循相同的规则。这样就不会询问向上或向下，它只是询问它是否正在滚动并相应地执行它。

如果您需要我为您更改我的 fiddle ，请告诉我您想要发生什么。我制作 fiddle 只是因为他们在 tympanus.net 示例上所做的糟糕工作。你不会制作一个教程来完成 2 页 js 的简单任务，那是不必要的，它除了“嘿，你想这样做吗？然后复制并粘贴我放在一起的这些东西没有提供任何指令明确的行动方针，以及太多难以快速消化的代码”。这对任何人学习都没有帮助。