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

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

2 голосов
/ 23 ноября 2011

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

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

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

О, подключаемый модуль находится здесь: http: /www.nebulus.org/parallax-test/js/libs/jquery.scrollParallax.js

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

1 Ответ

1 голос
/ 05 июля 2012

для небольших изменений положения (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/ довольно хорош и имеет параллакс, если вы его не пробовали.Не знаю, работает ли он для вашей специфики.

...