Этот сайт показывает довольно хороший пример того, как эффекты стиля параллакса могут работать на устройствах ввода-вывода https://victoriabeckham.landrover.com/INT
Они имитируют прокрутку в зависимости от типа ввода, который вы даете.Вы на самом деле не прокручиваете страницу, а затем анимируете различные свойства.Он читает события касания, колесо мыши или их собственную запеченную полосу прокрутки и видит, сколько вы хотите прокрутить.Все содержимое страницы находится в контейнере.Таким образом, когда вы делаете сенсорное событие, оно просто читает, сколько вы двигаетесь на странице.
Кроме того, они используют цикл анимации, чтобы заставить все двигаться.Они используют метод window.requestAnimationFrame, чтобы оптимизировать изменения на своей странице, чтобы она работала гладко на iPad и в браузере.Вот страница с описанием этого:
http://paulirish.com/2011/requestanimationframe-for-smart-animating/ Браузер может оптимизировать одновременную анимацию вместе в один цикл переформатирования и перерисовки, что приводит к более высокой точности воспроизведения.Например, анимации на основе JS синхронизируются с переходами CSS или SVG SMIL.Кроме того, если вы запускаете цикл анимации на невидимой вкладке, браузер не будет ее запускать, что означает меньшую загрузку ЦП, ГП и памяти, что приводит к значительному увеличению срока службы батареи.
Кроме того, они создали специальный ключевой кадр, который будет определять, как все анимируется на странице.Я пускаю слюни из-за этого.Жаль, что это не открытая структура.Вы можете установить, где эффект начинается, где он заканчивается, ослабление и т. Д. Только в объекте ключевого кадра, и их структура будет обрабатывать все остальное через цикл анимации.
{
selector: '#outro2 > .content2',
startAt: outroStart+500,
endAt: outroStart+1000,
onEndAnimate:function( anim ) {},
keyframes: [
{
position: 0,
properties: {
"margin-top": 650
}
},
{
position: 1,
ease: TWEEN.Easing.Sinusoidal.EaseOut,
properties: {
"margin-top": 650
}
}
]
},
В целом, яПолагайте, что сочетание пользовательской прокрутки и пользовательского цикла анимации с использованием метода requestAnimationFrame выходит за рамки ограничения параллакса, обычно связываемого с устройствами iOS.