Как я могу создать сайт прокрутки 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 и объедините это с разными уровнями и скоростями. Вы поймете, что прокрутка страницы примера не просто вертикальная параллакса, но также перемещает слои по горизонтали, пока вы прокручиваете вверх и вниз. Это возможно с помощью прокрутки.

Ответ 6

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

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

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