Исчезать непрозрачность при прокрутке

Я искал, как получить следующий эффект: 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 -->

ОБНОВЛЕНИЕ: я придумал это. Это работает, но я хочу, чтобы затухание запускалось быстрее. Таким образом, элементы списка исчезают вверх на моей странице, они должны начинаться немного быстрее в нижней позиции.

Яваскрипт:

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

javascript css fade
person Caspert    schedule 20.05.2013    source источник
comment
Вы пробовали что-то в Javascript?   -  person Achrome    schedule 20.05.2013
comment
@AshwinMukhija Смотрите мое обновление моего поста   -  person Caspert    schedule 20.05.2013
comment
Я думаю, что .offset() подходит здесь лучше, чем .positon(). Вы хотите, чтобы оно постепенно появлялось, когда оно видимо, или медленно появлялось и получалось полупрозрачное изображение, если оно было полувидимым?   -  person kelunik    schedule 20.05.2013
comment
@Recode Да, последний.   -  person Caspert    schedule 20.05.2013
comment
@Caspert Я добавил ответ, который работает.   -  person kelunik    schedule 20.05.2013

Ответы (4)


arrow_upward
2
arrow_downward

Если этого затухания внизу страницы достаточно, вы можете использовать это:

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();
});
person kelunik    schedule 20.05.2013

arrow_upward
0
arrow_downward

Эй, взгляните на 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;
}
person shammelburg    schedule 20.05.2013

arrow_upward
0
arrow_downward

Вы можете использовать этот плагин jQuery:

http://johnpolacek.github.io/supersscrollorama/

Веб-сайт, который вы показали в качестве примера, использует то же самое.

person Hariprasad    schedule 20.05.2013

arrow_upward
0
arrow_downward 

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

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

Этот триггер не работал в Chrome 28. Я изменил его, и он отлично работает.

$(window).load(function() {
    opacityScroll();
});
$(window).scroll(function () {
    opacityScroll();
});
person hywak    schedule 12.08.2013