4

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

这是我正在寻找的效果。

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

我尝试使用另一个函数（代码块）来检查滚动是向下还是向上，但我无法让它与现有代码一起使用。

任何帮助来完成这项工作都会很棒

祝你今天过得愉快

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

4

2 回答 2

2

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

尽管如果您确实想获得当前方向，您始终可以记录最后一个滚动位置并将其与当前位置进行比较。

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

就像这里的答案所暗示的那样。

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

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

于 2013-10-21T16:25:35.897 回答
2

在从tympanus.net借用一些代码并使用现代化库后，我想出了这个。

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

于 2013-09-05T10:05:24.430 回答