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

Posted 2023-03-06

【中文标题】带有滚动的 Jquery/Javascript 不透明度动画

【英文标题】：Jquery/Javascript Opacity animation with scroll

【发布时间】：2012-01-31 21:44:46

【问题描述】：

我希望根据用户滚动来更改对象的不透明度（并使过渡动画化）。 示例（http://davegamache.com/）

我到处搜索 像这里一样，但它最终将我指向航点插件（http://***.com/questions/6316757/opacity-based-on-scroll-position）

我已经实现了 [waypoints][1] 插件，并且一旦对象高于 100 像素，它就会消失。 [使用 offet 属性] 但想基本上控制对象的不透明度并让动画像上面的示例一样可见。

我已经搜遍了——这是我最后的选择。 非常感谢任何帮助。

【问题讨论】：

只需在我的答案中添加一个起点和终点肯定会比你想要的更多

【参考方案1】：

我知道我参加聚会有点晚了，但这是我的做法：

$(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
);

【参考方案2】：

由于我的声望低于 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);
    );

【参考方案3】：

我喜欢这个解决方案

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 的不透明度，然后也滚动页面？到目前为止我找到的解决方案完全禁用鼠标滚动功能

【参考方案4】：

这里有起点和终点的工作示例： 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);
);

【讨论】：

与此相反的是什么？我的意思是将不透明度从 0 更改为 1。

【参考方案5】：

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

我们所做的只是获取窗口的当前滚动位置，计算出当前有问题的元素在屏幕外的百分比，并使用该百分比设置其不透明度。

【讨论】：

这很棒。感谢您的快速回复。

绝妙的解决方案！ :)

【参考方案6】：

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