javascript - 滚动时淡化不透明度

Question

我正在寻找如何获得以下效果：http ://www.weareempire.co.uk/work/rob-evans-photography/

因此，当我向下滚动时，图像将在特定高度淡入。

我的标记：

<ul class="grid_12" id="portfolio-entrybox">
    <li><img src="../images/designstyle-2.jpg" alt=""></li>
    <li><img src="../images/designstyle-3.jpg" alt=""></li>
    <li><img src="../images/designstyle-4.jpg" alt=""></li>
    <li><img src="../images/designstyle-5.jpg" alt=""></li>
    <li><img src="../images/designstyle-6.jpg" alt=""></li>
</ul><!-- End ul.grid_8 #portfolio-entrybox -->

更新：我现在想出了这个。这是可行的，但我希望淡入淡出启动得更快。所以列表项淡入到我的页面上，应该在底部的位置开始更快一点。

Java脚本：

/* Every time the window is scrolled ... */
$(window).scroll( function(){
    /* Check the location of each desired element */
    $('#portfolio-entrybox li').each( function(i) {
        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it it */
        if( bottom_of_window > bottom_of_object ){
            $(this).animate({'opacity':'1'},500);
        }
    });
});

Answer 1

如果在页面底部有这种褪色就足够了，你可以使用这个：

http://jsfiddle.net/RrBEV/

$(window).scroll(function () {
    $('#portfolio-entrybox li').each(function (i) {
        var oTop = $(this).offset().top;
        var oHeight = $(this).outerHeight();

        var wTop = $(window).scrollTop();
        var wHeight = $(window).height();

        if (oTop < wTop + wHeight) {
            var diff = ((wTop + wHeight - oTop) / oHeight);

            if (diff > 1) diff = 1;
            else if (diff < 0) diff = 0;

            $(this).css('opacity', diff);
        }
    });
});

编辑：我添加了一个加载功能：http: //jsfiddle.net/4ft2W/

function opacityScroll() {
    $('#portfolio-entrybox li').each(function (i) {
        var oTop = $(this).offset().top;
        var oHeight = $(this).outerHeight();

        var wTop = $(window).scrollTop();
        var wHeight = $(window).height();

        if (oTop < wTop + wHeight) {
            var diff = ((wTop + wHeight - oTop) / oHeight);

            if (diff > 1) diff = 1;
            else if (diff < 0) diff = 0;

            $(this).css('opacity', diff);
        }
    });
}

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

$(document).ready(function() {
    opacityScroll();
});

Answer 2

嘿，看看 jsFiddle

http://jsfiddle.net/PeEHx/4/

这只是使用 html & css。

<div id="page">
    <div id="header">
    </div>
    <div id="content">
    Content Here
    </div>
</div>

#page
{ 
    width:100%;
    height:1000px;
    background-color:Gray;
}

#header
{
    position:fixed;
    top:0;
    width:100%;
    height:100px;
    background-color:White;
    opacity:0.5;
}
#content
{
    margin-top:100px;
}

Answer 3

你可以使用这个 jQuery 插件：

http://johnpolacek.github.io/superscrollorama/

您作为示例显示的网站正在使用相同的网站。

Answer 4

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

$(document).ready(function() {
    opacityScroll();
});

这个触发器在 Chrome 28 上不起作用。我把它改成了这个，它工作正常。

$(window).load(function() {
    opacityScroll();
});
$(window).scroll(function () {
    opacityScroll();
});