带滚动的Jquery / Javascript Opacity动画
我希望根据用户滚动更改对象的不透明度（并使动画转换为动画）。 示例（http://davegamache.com/）
我在这里搜索过，但它最终指向了我的路标插件（http://stackoverflow.com/questions/6316757/opacity-based-on-scroll-position）
我已经实现了[waypoints] [1]插件，并且一旦高于100px就会使对象褪色。 [使用offet属性]但希望基本上控制对象的不透明度，并使动画像上面的例子一样可见。
我已经搜遍过了 – 这是我的最后一招。 任何帮助是极大的赞赏。
这里有起点和终点的工作例： http ： //jsfiddle.net/z7E9u/1/
我在这里复制粘贴基本代码
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); }); 这是一个有效的例子： http ： //jsfiddle.net/meEf4/
和代码：
var target = $('div'); var targetHeight = target.outerHeight(); $(document).scroll(function(e){ var scrollPercent = (targetHeight - window.scrollY) / targetHeight; if(scrollPercent >= 0){ target.css('opacity', scrollPercent); } });
我们所做的只是获取窗口的当前滚动位置，找出现在有问题的元素的百分比，并使用该百分比设置其不透明度。
由于我的声望低于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); });
我查看了该网站的源代码。 它使用： $(document).scrollTop(); 确定滚动高度，以及$(window).scroll(function(){})将事件监听器绑定到滚动。
试试这个：
$(window).scroll(function(){ var fromtop = $(document).scrollTop(); // pixels from top of screen $('#fademeout').css({opacity: 100-fromtop}); // use a better formula for better fading });
我喜欢这个解决方案
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); });
你怎么能使用鼠标滚动才能褪色，直到达到0.2不透明度然后滚动页面？ 到目前为止我找到的解决方案完全禁用鼠标滚动function