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

Question

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

这就是我要找的效果。

http://nizoapp.com/

nizo站点中的效果我认为是用jquery完成的

我尝试了许多不同的方法来获得这种效果，包括 Skrollr、scrollorama 和 jquery animate 以及 css 转换等等等

我决定像“css 动画备忘单”（google it）一样疯狂地使用 css 过渡

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

这是一个只有一半工作的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 建议的答案一样。

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

如果您需要我为您修改我的小提琴，请告诉我您想要发生的事情。我只是因为他们在 tympanus.net 示例中所做的可怕工作而制作了小提琴。你不做一个教程来完成一个简单的任务2页js，那是不必要的，它除了“嘿，你想这样做吗？然后复制并粘贴这些我放在一起的东西没有提供任何指令明确的行动路线，以及太多无法快速消化的代码”。这对任何人都没有帮助。

Answer 2

从tympanus.net 借用一些代码并使用modernizer 库后，我想出了this。

我也尝试了不同的方法，但结果证明它们都有一些缺陷，所以我找到了使用示例代码和已经提供的现代化 JS 库的最佳方法。