Эффект прокрутки вниз с помощью JavaScript / jQuery

Question

Я ищу руководство по воссозданию этой функции. Как вы можете видеть, прокручиваете ли вы вниз, изменяется непрозрачность, и заголовок исчезает, когда появляется div ниже. Любые идеи или учебники, которые могут мне помочь? http://davegamache.com/

До сих пор я пробовал только $(window).scroll(function(){…});, где я могу прокрутить вниз до определенного триггера и, например, вызвать небольшой div Я думаю, что теперь я должен играть с непрозрачностью. Любая помощь, пожалуйста?

Answer 1

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

- хорошее начало ... оно запускает все, что вы хотите, когда запускаете свиток.например, просто положить .height ();в нем, чтобы прочитать высоту элементов, и если она ниже или выше некоторого числа, вы хотите начать .animate ();как непрозрачность ... просто поиграйте немного.

Answer 2

предлагает прочитать исходный код связанной страницы: (это тоже хорошо прокомментировано)

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

Answer 3

У вас есть правильная идея, используя $(window).scroll(function(){…});

Вы захотите выяснить Y-координату, при которой вы хотите, чтобы div был невидимым, и рассчитать непрозрачность div из этого.Большую часть времени я бы предположил, что эта максимальная координата Y должна быть такой же, как высота произведенного div.Допустим, наш div имеет высоту 500px.Если div должен иметь непрозрачность 0 при координате Y 500, то при координате 100 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);    
});