Jquery/Javascript带有滚动的不透明度动画

我正在寻找基于用户滚动来更改对象上的不透明度（并且让过渡变成动画）。例子（http://davegamache.com/）Jquery/Javascript带有滚动的不透明度动画

我找遍喜欢这里，但它最终指向我的航点插件（http://stackoverflow.com/questions/6316757/opacity-基于滚动位置）

我实现了[waypoints] [1]插件，并且一旦它的对象褪色超过100px。 [使用offet属性]但基本上控制对象的不透明度并让动画像上面的示例一样可见。

我搜遍了所有 - 这是我最后的手段。任何帮助，不胜感激。

来源

2012-01-02 Soulremedy

刚刚添加一个起点和终点到我的答案肯定会更多你想要的 – malko 2012-01-02 15:32:58

正与出发为例，在这里结束点： 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); 
});

来源

2012-01-02 15:17:45 malko

谢谢！它奇妙地工作。 – Soulremedy 2012-01-02 15:42:39

与此相反的是什么？我的意思是将不透明度从0改为1. – Ionut 2016-11-24 09:43:06

我看了看该网站的源代码。它使用：$(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 
});

来源

2012-01-02 15:18:34 Rodik

这里有一个工作示例：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); 
    } 
});

我们所要做的就是抓住窗口的当前滚动位置，找出问题中元素的百分比现在在屏幕外，并用该百分比设置其不透明度。

来源

2012-01-02 15:23:32 maxedison

这太好了。感谢您的快速回复。 – Soulremedy 2012-01-02 15:44:46

辉煌的解决方案！ :) – 2016-09-19 17:33:47

-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); 
});

你怎么能使用鼠标滚动的唯一直至达到如0.2混浊，然后滚动页面太褪色？我迄今发现的解决方案完全禁用鼠标滚动功能

来源

2015-03-24 17:15:30 Martin

由于我的信誉低于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); 
    });

来源

2017-03-18 10:59:52

Jquery/Javascript带有滚动的不透明度动画

回答

相关问题