使用JavaScript/jQuery幻燈片向下滾動效果

我正在尋找一些關於如何重新創建此功能的指導。正如你可以看到，如果你向下滾動不透明度的變化，標題隨着下面div的出現而消失。任何想法或教程可以幫助我？ http://davegamache.com/使用JavaScript/jQuery幻燈片向下滾動效果

到目前爲止，我只嘗試過$(window).scroll(function(){…});，我可以向下滾動到某個觸發器並彈出一個小格子。我想我現在也必須玩弄不透明。請幫忙嗎？

來源

2012-01-04 a.litis

我沒有看到一個問題，在Firefox在所有。 - 也注意到IE7中的一些問題，但沒有涉及到標題逐漸消失的問題。 – Undefined 2012-01-04 11:12:42

你必須使用$(window).scroll(function(){…});

你會想弄清楚y座標爲您想要的股利不可見，並計算該div的不透明度正確的想法。大多數情況下，我想這個最大Y座標應該和受影響的div的高度相同。可以說我們的div是500px的高度。如果在div應在在0不透明度Y座標500，則在y座標100的不透明度爲20％（或0.2）

工作樣品：http://jsfiddle.net/FzNrG/5/

$(window).scroll(function(){ 
    var opacity = 1- ($(window).scrollTop()/$('#theDiv').height()); 
    if (opacity>1) opacity=1; 
    if (opacity<0) opacity=0; 

    //$('#debug').html('ScrollTop:' + $(window).scrollTop() + '<br>Opacity: ' + opacity); 
    $('#theDiv').stop().fadeTo(250, opacity);  
});

來源

2012-01-04 11:20:48 Dutchie432

$(window).scroll(function(){…});

是一個很好的開始......當你開始滾動時，它會激發你想要的任何東西。例如只需放一些.height（）;在其中讀取元素的高度，如果它的下面或更高的數字，你想啓動.animate（）;就像不透明一樣......只是玩一下而已。

來源

2012-01-04 11:21:00 ggzone

完美！但是如果我不想讓bg圖像淡出，只有標題，例如？ – 2012-01-04 12:38:32

對這個標題使用一個額外的元素（文本只在沒有樣式的情況下），而已經存在的外層可以用你的背景處理樣式。只動畫僅文本元素，只有文本將淡出或動畫 – ggzone 2012-01-04 13:14:26

這裏是一個工作示例，只是文本淡入淡出。 ** ONLY **區別在於我已經將文本放在了輔助div'fadeDiv'中，當我調用'fadeTo（）'時，我引用了文本div，而不是BG容器：http://jsfiddle.net/FzNrG/9 / – Dutchie432 2012-01-04 16:10:07

建議閱讀鏈接頁面的源代碼：（它是很好的註釋過）

function slidingTitle() { 
    //Get scroll position of window 
    windowScroll = $(this).scrollTop(); 

    //Slow scroll of .art-header-inner scroll and fade it out 
    $artHeaderInner.css({ 
     'margin-top' : -(windowScroll/3)+"px", 
     'opacity' : 1-(windowScroll/550) 
    }); 

    //Slowly parallax the background of .art-header 
    $artHeader.css({ 
     'background-position' : 'center ' + (-windowScroll/8)+"px" 
    }); 

    //Fade the .nav out 
    $nav.css({ 
     'opacity' : 1-(windowScroll/400) 
    }); 
}

來源

2012-01-04 11:21:32 blindfold

使用JavaScript/jQuery幻燈片向下滾動效果

回答

相關問題