淡出 - 滚动时
问题描述:
当用户向下滚动时,有很多示例会做fadeOut完整动画。然而,这些动画做了完成fadeIn或fadeOut没有考虑到用户滚动。淡出 - 滚动时
如果用户滚动一点时,它淡出了一点,比方说30%,它的不断向上滚动,它会淡出30%以上等等...
我需要手艺类似的东西,但我需要看看,开始。
有没有人有一些例子来分享使用这种效果?
附注: 我需要在所有元素上应用淡出功能,当我们向下滚动时开始从顶部“离开”视口,然后在再次滚动时淡入。这只是一个背景。我并不是要求某人为我执行此代码,但我需要一个给定正确示例的启动。
有人请吗?
答
这里有一个简单的例子:
注:我在动画opacity
变化与CSS3跃迁。
$(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">
看来精辟简单。我会适当研究它,并适应。与其一次性删除所有元素,我不需要逐渐淡出所有元素,而是逐渐淡出所有元素的顶部。但这绝对是一个开始。感谢那。 – MEM 2014-09-25 10:24:02