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帶有滾動的不透明度動畫

回答

相關問題