javascript - personalizar - ¿Cómo puedo hacer un sitio de desplazamiento de paralaje que funcione en iOS y en el escritorio?

personalizar mensajes iphone

Question

Antes de que digas que esto no es posible, sé que lo es. Aquí hay un ejemplo: http://victoriabeckham.landrover.com/INT

El problema principal es que iOS congela la manipulación de DOM en el desplazamiento, por lo que tiene que usar algún tipo de técnica para superar el problema. El complemento de paralaje que esperaba usar es stellar.js, pero el problema con el que me estoy topando es que la "demostración de iOS" para ese complemento no es realmente utilizable en un escritorio. Jugué con esto durante 3 horas esta mañana, y no pude obtener una configuración que funcionara correctamente tanto en iOS como en el escritorio.

Necesito algunas ideas, ya sea una técnica para configurar stellar.js para que funcione de la misma manera en ambas (no estoy seguro de si eso es posible), u otra biblioteca que funcione en ambas, o tal vez alguna información sobre cómo podría programar una solución alternativa. mí mismo.

Cualquier ayuda es apreciada.

Answer 1

Eche un vistazo a la "ruta de desplazamiento" de jQuery-Plugin http://joelb.me/scrollpath y combine esto con diferentes capas y velocidades. Habrá reconocido que el desplazamiento de la página de ejemplo no es solo una etapa de paralaje vertical, sino que también mueve las capas horizontalmente mientras se desplaza hacia arriba y hacia abajo. Esto es posible con Scroll Path.

Answer 2

Haga sus tareas de paralaje normalmente en el escritorio y luego agregue un detector de eventos ''touchmove'' para activar el evento de desplazamiento:

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

Probado y trabajando en iPad 2 con iOs 5.1.1

Answer 3

He implementado con éxito el desplazamiento de paralaje entre dispositivos / navegadores con la ayuda de la biblioteca Zynga Scroller js . Se ocupa de una de sus principales preocupaciones, que es la interoperabilidad de los eventos de clic y toque y el desplazamiento en dispositivos webkit móviles: esto le permite manipular el DOM a medida que se desplaza.

Luego, para crear el efecto de paralaje tienes tres opciones:

1. Simular un paralaje 3d real usando transformaciones 3d (con un elemento padre / envoltorio que controla la perspectiva y el origen de la transformación).
2. Usando una biblioteca de paralaje 2d como stellar.js o skrollr
3. Construyendo tu propio algoritmo de desplazamiento de paralaje.

Aquí hay una demostración rápida (usando el código de muestra existente) de la opción 1 que muestra cómo funcionaría el desplazamiento suave de paralaje en dispositivos de escritorio y móviles. Por supuesto, usted está limitado a dispositivos que tienen soporte para transformaciones 3d. Tenga en cuenta que el Zynga Scroller funciona haciendo clic / tocar y arrastrar; probablemente no debería usarse como una solución de dekstop, ya que lo único que se requeriría es el overflow: scroll en CSS.

Answer 4

Intente usar http://cubiq.org/iscroll-4 y stellar.js juntos.

Answer 5

Paso 1: crear y objetar así

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

   nextStartFrameNumber: {

   }
}

Paso 2: haga que la página sea insuperable a través de CSS, es decir, 100% de alto y ancho con y desbordamiento: oculto

Paso 3: Cuando el usuario se desplaza (a través de la barra de desplazamiento personalizada, la acción del teclado o los eventos táctiles), avanza los fotogramas de la animación en función de la distancia o el desplazamiento. Si el objeto de animación que creó tiene una clave [cuadro], agréguelo a la cola de cosas que están visibles y en movimiento, y mueva todas esas cosas en la cola a sus lugares apropiados y / o elimínelos de la cola de objetos activos.

Eso es. La función para mover las cosas debe ser bastante sencilla, excepto que para que las animaciones sean fluidas será un poco complicado.

Answer 6

Simplemente desplace cada capa del efecto de paralaje manualmente y controlelas usted mismo sin confiar en el desplazamiento de la página del navegador.