带有滚动的 Jquery/Javascript 不透明度动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8702329/
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
Jquery/Javascript Opacity animation with scroll
提问by Soulremedy
I'm looking to change the opacity on an object (and have the transition be animated) based on a users scroll. example(http://davegamache.com/)
我希望根据用户滚动来更改对象的不透明度（并为过渡设置动画）。示例（http://davegamache.com/）
I've searched everywhere like here, but it ends up pointing me to the waypoints plugin (http://stackoverflow.com/questions/6316757/opacity-based-on-scroll-position)
我像这里一样到处搜索，但它最终指向我的航点插件（http://stackoverflow.com/questions/6316757/opacity-based-on-scroll-position）
I've implemented the [waypoints][1] plugin and have the object fading once it's higher than 100px. [Using the offet attribute] but would like to basically control the opacity of an object and have the animation be visible like the above example.
我已经实现了 [waypoints][1] 插件，并且一旦对象高于 100px 就会褪色。[使用offet属性]但想基本上控制对象的不透明度并使动画像上面的例子一样可见。
I've searched all over- this is my last resort. Any help is greatly appreciated.
我已经找遍了——这是我最后的手段。任何帮助是极大的赞赏。
回答by malko
working exemple with starting and ending point here: http://jsfiddle.net/z7E9u/1/
这里有起点和终点的工作示例：http: //jsfiddle.net/z7E9u/1/
I copy paste basic code here
我在这里复制粘贴基本代码
var fadeStart=100 // 100px scroll or less will equiv to 1 opacity
,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity
,fading = $('#fading')
;
$(window).bind('scroll', function(){
var offset = $(document).scrollTop()
,opacity=0
;
if( offset<=fadeStart ){
opacity=1;
}else if( offset<=fadeUntil ){
opacity=1-offset/fadeUntil;
}
fading.css('opacity',opacity).html(opacity);
});
回答by maxedison
Here's a working example: http://jsfiddle.net/meEf4/
这是一个工作示例：http: //jsfiddle.net/meEf4/
And the code:
和代码：
var target = $('div');
var targetHeight = target.outerHeight();
$(document).scroll(function(e){
var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
if(scrollPercent >= 0){
target.css('opacity', scrollPercent);
}
});
All we do is grab the current scroll position of the window, figure out what percentage of the element in question is now off-screen, and set its opacity with that percentage.
我们所做的就是获取窗口的当前滚动位置，计算出当前有问题的元素在屏幕外的百分比，然后将其不透明度设置为该百分比。
回答by Tom McDonough
As I have lower than 50 reputation I cannot reply to Lonut's question, how to do the reverse. Here is my code if you would like the reverse, quite handy for navigation bars.
由于我的声望低于 50，我无法回答 Lonut 的问题，如何做相反的事情。这是我的代码，如果你想要相反的，对于导航栏来说非常方便。
$(window).scroll(function () {
var offset = $(document).scrollTop()
var opacity = 0;
if (offset <= 0) {
opacity = 0;
} else if (offset > 0 & offset <= 200) {
opacity = (offset - 1) / 200;
}
else {
opacity = 1;
}
$('.black-background').css('opacity', opacity).html(opacity);
});
回答by André R. Kohl
I know I am a bit late to the party, but here's my approach:
我知道我参加聚会有点晚了，但这是我的方法：
$(window).scroll(function(){
var st = $(window).scrollTop();
var range = 300 // finetune this to the desired effect
$('.yourelement').css("opacity", 1- st / range); // animate your element
});
回答by Rodik
I looked at the source code of that site.
it uses: $(document).scrollTop();to determine the scroll height, and $(window).scroll(function(){})to bind an event listener to scrolling.
我查看了该站点的源代码。它用于：$(document).scrollTop();确定滚动高度，并将$(window).scroll(function(){})事件侦听器绑定到滚动。
try this:
尝试这个：
$(window).scroll(function(){
var fromtop = $(document).scrollTop(); // pixels from top of screen
$('#fademeout').css({opacity: 100-fromtop}); // use a better formula for better fading
});
回答by Martin
I like this solution
我喜欢这个解决方案
var fadeStart=100 // 100px scroll or less will equiv to 1 opacity
,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity
,fading = $('#fading')
;
$(window).bind('scroll', function(){
var offset = $(document).scrollTop()
,opacity=0
;
if( offset<=fadeStart ){
opacity=1;
}else if( offset<=fadeUntil ){
opacity=1-offset/fadeUntil;
}
fading.css('opacity',opacity).html(opacity);
});
How could you use the mouse scrolling for the fading ONLY until eg 0.2 opacity is reached and then scroll the page too? The solutions i found so far disable the mouse scrolling function completely
你怎么能只使用鼠标滚动渐变直到达到例如 0.2 不透明度，然后滚动页面？到目前为止我发现的解决方案完全禁用了鼠标滚动功能
