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 -->

更新：我现在想到了这个。这是有效的，但我希望fadeIn开始更快。因此，列表项淡入到我的页面高度，应该在底部位置开始快一点。

Javacript：

/* 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);
        }
    });
});

编辑：我添加了一个onload-function：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＆amp;的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();
});

滚动时淡化不透明度

4 个答案: