Как я могу создать сайт прокрутки parallax, который работает на iOS и на рабочем столе?

Прежде чем сказать, что это невозможно, я знаю, что это так. Вот пример: http://victoriabeckham.landrover.com/INT

Основная проблема заключается в том, что iOS замораживает манипуляции с DOM при прокрутке, поэтому для преодоления проблемы вам нужно использовать какую-то технику. Плагин parallax, который я надеялся использовать, - stellar.js, но проблема, с которой я сталкиваюсь, заключается в том, что "iOS demo" для этого плагина на самом деле не используется на рабочем столе. Я пробовал это в течение 3 часов этим утром и не мог получить настройку, которая работает правильно как на iOS, так и на рабочем столе.

Мне нужны некоторые идеи, либо метод настройки stellar.js, чтобы работать одинаково на обоих (я не уверен, что это возможно), или в другой библиотеке, которая работает на обоих, или, может быть, на каком-то понимании того, как я могу запрограммируйте обходной путь.

Любая помощь приветствуется.

Ответ 1

Шаг 1: Создайте и создайте объект, подобный этому

{
startFrameNumber: {
     //first obj
     id: idOfElement
     duration: howeverManyFrames
     startLeft: whatever
     endLeft: whatever
     startTop: stillWhatever
     endTop: whateverAgain
   },

   nextStartFrameNumber: {

   }
}

Шаг 2: Сделайте страницу незаметной через CSS, т.е. 100% высоту и ширину с и переполнением: скрытый

Шаг 3. Когда пользователь прокручивает (через пользовательскую полосу прокрутки, действие клавиатуры или события касания), продвигайте кадры анимации x на основе того, насколько они прокручиваются или что-то еще. Если ваш созданный анимационный объект имеет ключ [frame], добавьте его в очередь вещей, видимых и перемещающихся, и переместите все эти вещи в очередь в соответствующие места и/или удалите их из очереди активных объектов

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

Ответ 2

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

Ответ 3

Я успешно выполнил прокрутку parallax перекрестного устройства/браузера с помощью библиотеки js zynga scroller js. Он заботится об одной из ваших основных проблем, которая связана с взаимодействием событий нажатия и касания и прокруткой на мобильных устройствах веб-кита - это позволяет вам манипулировать DOM по мере прокрутки.

Затем, чтобы создать эффект параллакса, у вас есть три варианта:

Имитация 3d-параллакса реального мира с использованием 3d-преобразований (с элементом parent/wrapper, который управляет перспективой и преобразует начало).
Использование 2d-библиотеки параллакса, например stellar.js или skrollr
Построение собственного алгоритма прокрутки параллакса.

Здесь приведена быстрая демонстрация (с использованием существующего образца кода) варианта 1, показывающая, как гладкая прокрутка параллакса будет работать на настольных и мобильных устройствах. Конечно, вы ограничены устройствами, поддерживающими 3D-преобразования. Обратите внимание, что скроллер Zynga работает с помощью щелчка/касания и перетаскивания - он, вероятно, не должен использоваться как решение для декстрофа, так как требуется только overflow: scroll в CSS.

Ответ 4

Посмотрите на jQuery-Plugin "Scroll Path" http://joelb.me/scrollpath и объедините это с разными уровнями и скоростями. Вы поймете, что прокрутка страницы примера не просто вертикальная параллакса, но также перемещает слои по горизонтали, пока вы прокручиваете вверх и вниз. Это возможно с помощью прокрутки.

Ответ 5

Попробуйте использовать http://cubiq.org/iscroll-4 и stellar.js вместе.

Ответ 6

Сделайте свой материал параллакса для обычного рабочего стола, а затем добавьте прослушиватель событий "touchmove", чтобы запустить событие прокрутки:

document.body.addEventListener('touchmove', function(){$window.scroll()}, true);

Протестировано и работает на iPad 2 с iOS 5.1.1