El parallax (o paralaje en español) es utilizado para dar la sensación de utilizar elementos en tres dimensiones gracias a movimientos en diferentes capas y a diferentes velocidades.
En este artículo vais a aprender como hacer un efecto parallax sencillo y algunos datos para poder realizar acciones mas complejas.
Lo primero que hay que hacer es crear la estructura básica en html. Este ejemplo va a tener un fondo y 3 planetas que se moverán en direcciones opuestas y a velocidades distintas.
A este código se le pondrá un estilo básico (CSS) para poder visualizar la sensación de parallax.
Ahora que está la base de la página creada tocará realizar la función para animar los elementos con jQuery. Esto puede ser utilizado en cualquier elemento, aunque lo mas común es hacer movimientos mas lentos en los fondos.
Como se puede ver, lo que hace es llamar a la función parallaxScroll() cuando se realiza un scroll en la pantalla. Esta función recoge el movimiento de la pantalla en eje Y (vertical) y es lo que utilizaremos para mover la posición de un elemento hacia cualquier dirección.
En la misma operación se elige la velocidad a la que queremos que vaya, haciendo que multiplicar por un número mayor que 1 la aumente y un número entre 0 y 1 la disminuya respecto a la velocidad normal del scroll.
Recordad que el parallax ofrece mucho juego pero excederse puede ser un error sobre todo en una web profesional.
