Параллакс до определенной высоты на странице?

Question

[Чёкатилло]

Есть у мня скрипт:

var p1 = $('#primary');
$(window).bind('scroll',parallaxScroll);
function parallaxScroll(){
    var scrolled = $(window).scrollTop();
    p1.css('top',(0-(scrolled*.30))+'px');
}

Чем его дополнить, что бы он работал до определенной высоты в пикселях (например 900px)?

Спасибо за внимание!

Answer 1

[Иван Вишневский]

Во-первых, не стоит использовать top, используйте transform: translateX. Во-вторых:

function parallaxScroll(){
    var scrolled = $(window).scrollTop();
    if(scrolled > 900) scrolled = 900
    p1.css('top',(0-(scrolled*.30))+'px');
}

Comments

[Чёкатилло]

Все работат Спасибище!

[Никита]

во вторых такой функцией вы сильно грузите браузер, за 1 скрол ваша функция вызывается почти на каждый проскроленный пиксель, используйте debounce (тормозилка)

[Чёкатилло]

Никита: а чего это? Это оно? stackoverflow.com/questions/37502075/parallax-effe...

[Никита]

Дмитрий: томозилка это некая функция паттерн для слежения частоты выполнения операций. Ее реализация может быть разная, но суть одна остается. По вашей ссылке это оно

[Иван Вишневский]

Дмитрий: вообще, параллакс обычно лучше делать с помощью css3-трансформаций, нежели js-ом.

[Чёкатилло]

forgetable: Блин, я задавал вопрос такой и не нашел точного ответа Есть наброски этого варианта? Спасибо! )

[Иван Вишневский]

Дмитрий: прошу вас:
keithclark.co.uk/articles/pure-css-parallax-websites
Я делал на основе этого маленькую демку: тыц.