ejemplos efecto bootstrap javascript jquery html5 css3 parallax

javascript - efecto - parallax html5



Jquery Parallax Efecto de desplazamiento-Multi direccional (5)

¿Buscó en librairies como Scrollrama http://johnpolacek.github.com/scrollorama/ o Curtain http://curtain.victorcoulon.fr/ ?

Sé en tu pregunta que mencionas que ya investigaste diferentes bibliotecas, pero dependiendo de cómo funcionan es difícil sugerir realmente cómo usar las coordenadas adecuadas.

* edit1

Si aún no lo has visto, el autor de scrollorama también hizo superscrollorama, que da un poco más de control sobre la animación, por ejemplo, la animación cuando se fija un elemento.

http://johnpolacek.github.com/superscrollorama/

Necesito crear una página de paralaje JQuery multidireccional para un cliente; básicamente quieren que funcione de manera similar a esto: https://victoriabeckham.landrover.com/INT

Tengo la obra de arte preparada y he encontrado muchas librerías jquery que me permitirán desplazarme horiz / vertical, pero no estoy seguro de cómo combinar ambas juntas en una determinada coordenada. ¿Alguien podría señalarme en la dirección correcta?

Editar: Originalmente firmé esta publicación después de haber mirado en Superscrolarama y pensando que todo estaba resuelto, pero después de haber tenido problemas para implementarlo, no creo que sea el salvador que pensé que era, necesito paralaje horizontal y vertical, así como desplazarse a alcanzar arriba, que no parece ser compatible, ¡por lo que cualquier otro consejo estaría muy agradecido!


Este artículo en smashinghub.com muestra una colección de plugins de JQuery para desplazamiento y efecto de paralaje. Estoy totalmente seguro de que uno de ellos te ayudará. parece que jQuery Scroll Path es el más avanzado de ellos o se ajusta a sus necesidades.


Lancé algo juntos es jsfiddle para ti.

http://jsfiddle.net/9R4hZ/40/

El script inicializa primero las posiciones de inicio de todos los objetos. A continuación, los controladores están configurados para la tecla de flecha y la rueda del mouse. Después de eso es la carne del algoritmo en la función parallaxScroll.

Utiliza las FLECHAS o RUEDA MOUS para desplazarse.

Hay desde [izquierda, derecha, arriba, abajo] transiciones.

El HTML y CSS son realmente simples.

El JS / jQuery que lo ejecuta es auto explicativo.

Es un efecto interesante, que parece estar orientado a sitios artísticos.


Me doy cuenta de que salgo tarde aquí, y esto puede parecer muy obvio, pero ¿has probado la ingeniería inversa de lo que han hecho en https://victoriabeckham.landrover.com/INT ? Parece que el script ScrollAnimator realiza una gran parte del trabajo. Me gustaría descargar su sitio y meterlo localmente, restando partes hasta que descubrí qué componentes proporcionan qué piezas de funcionalidad. Luego leería a través de esos para comprender cómo lo hicieron posible.