javascript 滚动jquery css动画的飞入飞出效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18615562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fly-in Fly-out effect on scroll jquery css animation
提问by Charis Ryan
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
nizo网站中的效果是用jquery做的，我觉得
I have tried many different ways to get this effect working, with Skrollr, scrollorama, and jquery animate and with css transitions etc etc etc
我尝试了许多不同的方法来获得这种效果，使用 Skrollr、scrollorama 和 jquery animate 以及使用 css transitions 等等
I decided to use css transitions as mad by the "css animation cheat sheet" (google it)
我决定使用“css 动画备忘单”疯狂的 css 转换（谷歌它）
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
这是一个 jsfiddle，它一半工作
http://jsfiddle.net/mrcharis/Hjx3Z/4/
http://jsfiddle.net/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
有一天我会发布解决方案，如果我能弄清楚，肯定有人想知道
回答by Laniakea
After some code borrowing from tympanus.netand using the modernizerlibrary I came up with this.
在从tympanus.net借用一些代码并使用现代库之后，我想出了这个。
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.
我也尝试了不同的方法，但结果证明所有方法都存在一些缺陷，因此我发现最好的方法是使用示例代码和已经提供的 Modernizer JS 库。
回答by FiLeVeR10
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 compare 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 heresuggests.
就像这里的答案所暗示的那样。
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.net example. You don't make a tutorial to accomplish 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.
如果您需要我为您更改我的小提琴，请告诉我您想要发生的事情。我只是因为他们在 tympanus.net 示例中所做的糟糕工作而制作了小提琴。你不做一个教程来完成一个简单的任务 2 页 js，这是不必要的，除了“嘿，你想这样做吗？然后复制粘贴这些我放在一起的东西，没有明确的行动方针，以及太多的代码无法快速消化”。这对任何人的学习都没有帮助。
