圖像不透明度在滾動

它是如何工作的？我無法修復它。在這邊您可以在滾動時看到不透明度爲1的圖像。當你停止滾動它消失不透明度爲0圖像不透明度在滾動

它是如何工作的？這是CSS？

2013-12-09 Kruemmelmonster

您是否在談論如何在單詞滾動時出現「HEYDAY」這個詞？ –

您可以通過

$(document).scrollTop()

檢查滾動位置我會打電話的setTimeout上比較當前和最後Scrolldown已值的功能，這樣，如果身體是在最後一秒滾動我可以告訴。實施細節取決於你。 :-)

來源

2013-12-09 22:12:24 nagylzs

爲了使其立即響應，您還可以綁定「mousewheel」和「keydown」事件，但這可能會導致這樣一個簡單的影響矯枉過正。 – nagylzs

首先，它是'setInterval（）'而不是'setTimeout（）'。其次，無論用戶活動如何，每隔幾毫秒運行一些代碼都會不必要的膨脹。綁定到滾動事件並僅使用計時器來計算滾動停止的時間要簡單得多，而這一次只發生幾秒鐘。 –

試試這個：http://jsfiddle.net/tonicboy/HvuLH/

HTML：

<h1 id="word">HEYDAY</h1> 
<p>a bunch of text</p>

CSS：

#word { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    display: none; 
}

JAVASCRIPT：

var stopscroll, 
visible = false; 

$(window).on('scroll', function() { 
    clearTimeout(stopscroll); 
    stopscroll = setTimeout(onStop, 250); 

    if (!visible) { 
     $('#word').fadeIn(); 
     visible = true; 
    } 
}); 

var onStop = function() { 
    $('#word').fadeOut(); 
    visible = false; 
};

來源

2013-12-09 22:17:19

圖像不透明度在滾動

回答

相關問題