Question

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

这是我正在寻找的效果。

http://nizoapp.com/

nizo网站的效果是用jquery完成的，我认为

我尝试了很多不同的方法来实现这个效果，包括Skrollr，scrollorama和jquery animate以及css过渡等等

我决定使用css过渡作为“css动画作弊表”疯狂（google it）

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

这是一个半工作的小提琴

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

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

我尝试了不同的方法但是所有这些方法都有一些缺陷，因此我找到了使用示例代码和已经提供的现代化JS库的最佳方法。

Answer 2

知道你是否向上或向下滚动的技巧不是要问。通过使用相关元素的顶部偏移量使其成为关系。然后它就像＆gt;一样简单或者＆lt;，大部分。

虽然如果你想获得当前的方向，你总是可以记录最后一个滚动位置并将其与当前滚动位置进行比较。

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，这是不必要的，它不提供除“嘿，你想要这样做之外的任何指令？然后复制并粘贴我放在一起没有的东西明确的行动方案，以及过多的代码来快速消化“。这对任何人都没有帮助。

滚动jquery css动画中的Fly-in Fly-out效果

2 个答案: