Как решить мерцание элемента при прокрутке с эффектом параллакса в JavaScript? - PullRequest
Новая
       45

Как решить мерцание элемента при прокрутке с эффектом параллакса в JavaScript?

6 голосов
/ 25 января 2012

Я пытаюсь заново создать сайт с эффектом параллакса, используя JavaScript.Это означает, что у меня есть два или более слоя, которые перемещаются с разными скоростями при прокрутке.

В моем случае я перемещаю только один слой, другой остается статичным: layer 1 = text website;слой 2 = фон элемента;

для этого я использую простой исходный код (с jQuery 1.6.4): 

var docwindow = $(window);

function newpos(pos, adjust, ratio){
   return ((pos - adjust) * ratio)  + "px";
}

function move(){
   var pos = docwindow.scrollTop();
   element.css({'top' : newpos(pos, 0, 0.5)});
}

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

Проблема: - Все вычисления выполнены правильно и эффект«работает», как и ожидалось.Но есть некоторые проблемы с производительностью в некоторых браузерах (Chrome MAC / Windows, Opera MAC, IE, как это ни парадоксально, не Safari).

Что я вижу при прокрутке?- При прокрутке фон перемещается в одном направлении вместе с прокруткой, но иногда кажется, что он прыгает на несколько пикселей назад и вперед, что создает очень мешающий эффект (не плавный).

Решения, которые я пробовал: - добавлениетаймер для ограничения событий прокрутки - использование метода .animate () с короткой продолжительностью вместо метода .css ().

Я также заметил, что анимация плавная при использовании метода .scrollTo (плагин scrollTo jQuery),Поэтому я подозреваю, что что-то не так с событиями запуска прокрутки (слишком быстро).

Наблюдали ли вы такое же поведение?Вы знаете, как это исправить?Можете ли вы опубликовать лучшее решение?

Спасибо за все ответы

РЕДАКТИРОВАТЬ # 1: Здесь вы можете найти демонстрацию jsfiddle (с таймером): http://jsfiddle.net/4h9Ye/1/

1 Ответ

9 голосов
/ 25 января 2012

Я думаю, вы должны использовать вместо этого scrollTop () и изменить положение фона на fixed . Проблема в том, что при установке значения absolute он будет перемещаться по умолчанию при прокрутке вверх или вниз.

Мерцание возникает из-за того, что позиция обновляется как часть прокрутки браузера по умолчанию и снова обновляется как часть вашего сценария. Это отрендерит обе позиции, а не только ту, которую вы хотите. Если исправлено, фон никогда не будет двигаться, пока вы не скажете это.

Я создал демо для вас на http://jsfiddle.net/4h9Ye/2/.

...