jQuery Parallax - элементы не заканчиваются здесь, они начинались

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

Большинство плагинов используют огромные теги DIV и прокручивают фон. В моем случае это не сработает, так как клиент хочет, чтобы спрайты анимированных персонажей и всевозможные другие элементы были параллаксированы, например контент. Поэтому вместо перемещения фона мне нужно перемещать сами элементы. Я еще не нашел плагин, который будет делать это.

Мой плагин работает чертовски хорошо, за одним исключением. При дрожащей или интенсивной прокрутке элементы ползут по странице, а не заканчиваются там, где они начинались по вертикали. Вот пример (простите за ужасный стиль, это грубый макет): http://www.nebulus.org/parallax-test

О, незавершенный плагин находится здесь: http://www.nebulus.org/parallax-test/js/libs/jquery.scrollParallax.js

Если вы быстро прокрутите вверх/вниз, вы заметите, что спрайты в верхней части страницы заканчиваются довольно далеко от того места, где они начинались. У кого-нибудь есть идея, как заставить их себя вести? Большое спасибо за вашу помощь - я планирую выпустить плагин, как только он будет готов (подтолкнуть, подмигнуть).


scroll jquery parallax positioning
person Pat Friedl    schedule 23.11.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

для небольших изменений позиции (containerScrollY1-containerScrollY2) = 1 или -1, у вас проблема с округлением в

newY = myPosY + (containerScrollY1-containerScrollY2)*params.inertiaY;
$base.css('top',newY+'px');

если inertia = 0.25 и вы прокручиваете вниз на один пиксель, then new = old - 0.25 который переходит в old - 1, если вы прокручиваете вверх на один пиксель, то new = old + 0.25 который переходит в old, поэтому для любой прокрутки одного пикселя (который я много раз пробовал ваш код), объект перемещается вверх на единицу при прокрутке вниз и вообще не перемещается при прокрутке вверх.

для больших изменений положения (быстрая прокрутка, о которой вы говорили) проблема возникает только из-за движущихся объектов, если они видны. Если вы удалите условие isVisible внутри handleScrolling, проблема быстрой прокрутки исчезнет (при условии, что каждая прокрутка достаточно велика, чтобы избежать описанной выше проблемы округления). Например, прокрутка в 100 пикселей приводила к тому, что объект, который находился на расстоянии 20 пикселей от экрана, перемещался на 80 пикселей в незарегистрированном прыжке (т. е. его myPosY выпадало из синхронизации на 80 пикселей).

Чтобы потенциально исправить обе эти проблемы, я бы сохранил исходную позицию объекта в качестве параметра, а затем всегда вычислял его параллаксную позицию из этого абсолютного значения. Например, newY = params.origY - $(params.container).scrollTop()*inertiaY Это сработало с моей стороны. Удачи!

Кроме того, http://johnpolacek.github.com/scrollorama/ довольно хорош и имеет параллакс, если вы не пробовал. Не знаю, работает ли это для вашей специфики.

person Adrik    schedule 05.07.2012