淡出 - 滚动时

【问题标题】：Fade out - while scrolling淡出 - 滚动时
【发布时间】：2014-09-25 09:34:28
【问题描述】：

有很多示例在用户向下滚动时执行淡出完成动画。但是，这些动画会执行 complete fadeIn 或 fadeOut 而不考虑用户滚动。

如果用户向上滚动一点，它会淡出一点，比如说 30%，它继续向上滚动，它会淡出更多 30% 等等......

我需要制作类似的东西，但我需要看一些东西才能开始。

有没有人可以分享一些使用这种效果的例子？

旁注：当我们向下滚动时，我需要在所有开始从顶部“离开”视口的元素上应用淡出，然后在我们再次向上滚动时进行淡入。这只是一个上下文。我不是要求某人为我编写此代码，但我需要一个给定的适当示例的启动。

有人吗？

【问题讨论】：

标签： jquery

【解决方案1】：

这是一个简单的例子：

注意：我正在使用 CSS3 转换为 opacity 更改动画。

$(window).scroll(function(){
    var scroll = $(window).scrollTop();
    $('img').css('opacity', (100-scroll)/100)
});

html,body{
    height:10000px;
}

img{
    transition: all 0.2s ease-in;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="http://pngimg.com/upload/beer_PNG2353.png">

【讨论】：