使用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幻灯片向下滚动效果

回答

相关问题