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

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

В моем случае я перемещаю только один слой, другой остается статичным: слой 1 = текст веб-сайта; слой 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/

6
задан Marakoss 25 January 2012 в 18:20
поделиться