Создание базового эффекта параллакса с помощью jQuery и window.pageYOffset

Я пытаюсь создать эффект, при котором при прокрутке изображение слайдера будет прокручиваться вниз вместе со страницей с меньшей скоростью. Это похоже на параллакс, и хорошей демонстрацией будет этот сайт: http://escapeflight.com/

Если вы прокрутите страницу вниз, вы увидите эффект, о котором я говорю.

Мое приложение похоже, но у меня есть заголовок, который не исправлен. Код ниже:

header = $('header').height();

function setTopSlider(){
    offset = window.pageYOffset;

    //if we have scrolled down past the height of the header, we want to begin the 'parallax' effect
    if(iScroll > header){
        $('.slides').css('top',(offset/3))
    }else{
        $('.slides').css('top',0);
    };
};

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

Это работает, но когда вы прокручиваете высоту заголовка, значение css .slides переходит вниз к рассчитанному значению. Мне нужна помощь с этим расчетом offset/3, чтобы, когда вы достигаете верхней части ползунка, не было скачка - он просто начинал прокручиваться вниз, но с другой скоростью, чем остальная часть страницы.

Повторюсь, мне нужно, чтобы ползунок прокручивался медленнее, чем остальная часть страницы, поэтому я использую описанную выше технику, чтобы «подделать это», установив его «верхнее» положение, которое вычисляется текущим pageYOffset. Любые идеи?


person JCHASE11    schedule 17.05.2013    source источник
comment
К вашему сведению, я не вижу эффекта параллакса на сайте, на который вы ссылаетесь. Мне кажется, все прокручивается одинаково. Не уверен, что когда-либо видел такой эффект на сайте. Можете ли вы найти лучшую ссылку, теперь мне любопытно.   -  person SpYk3HH    schedule 17.05.2013
comment
Посмотрите на скорость, с которой слайдер прокручивается относительно остальной части сайта. Это не "параллакс", так сказать, а похожий эффект. Вы видите это?   -  person JCHASE11    schedule 17.05.2013


Ответы (1)


Это будет зависеть от того, как вы настроили разметку. На сайте, который вы показали, у них есть div с абсолютным позиционированием, и они настраивают верхнее значение. Я предполагаю, что вы делаете то же самое с аналогичной структурой html/css. Если да, попробуйте:

$('.slides').css('top' , ((offset - header)/3 ));

Отрегулируйте «/3» по своему усмотрению, чтобы настроить скорость.

person Chris Arasin    schedule 17.05.2013