Fade opacity when scrolling

问题

I was searching how I can get the following effect: http://www.weareempire.co.uk/work/rob-evans-photography/

So when I scroll down, the images will be fade in at a specific height.

My markup:

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

UPDATE: I came now up with this. This is working, but I want that the fadeIn start faster. So the list items fadeIn to heigh at my page, the should start a little faster at the position of the bottom.

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

回答1:

If it's enough to have this fading at the bottom of the page you can use this:

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

Edit: I added a 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();
});

回答2:

Hey have a look at the jsFiddle

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

this is just using 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;
}

回答3:

You can use this jQuery plugin:

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

The website which you have shown as example is using the same.

回答4:

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

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

This trigger didn't work on Chrome 28. I chnged it into this, and it works fine.

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

来源：https://stackoverflow.com/questions/16653543/fade-opacity-when-scrolling

标签

javascript

css

fade