Я пытаюсь воссоздать веб-сайт с эффектом параллакса, используя 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/