淡出 - 滚动时

Question

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

如果用户向上滚动一点，它会逐渐消失，让它说30％，它会继续向上滚动，它会逐渐淡出30％等等......

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

有没有人有一些分享使用此效果的例子？

旁注： 我需要在所有开始＆＃34;离开＆＃34;的元素上应用fadeOut。当我们向下滚动时，从顶部开始的视口，当我们再次向上滚动时，然后生成fadeIn。这只是一个背景。我并没有要求别人为我做这个代码，但我需要一个适当的例子。

有人请吗？

Answer 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">