Efecto PARALLAX con CSS y jQuery

Efecto PARALLAX con CSS y jQuery

Lo primero que debemos tener claro es qué es el EFECTO PARALLAX. Imaginemos que hay un coche parado en una carretera. En la orilla de la carretera hay una hilera de árboles. Detrás de estos árboles, un poco más lejos, se pueden ver unas casas y, mucho más detrás de las casas, una montaña.

Ahora nos subimos en el coche y emprendemos la marcha. Los árboles, al ser los objetos más cercanos al coche, parece que se mueven más rápido que las casas. Como las montañas es lo más lejano que tenemos, parece que se mueven mucho más despacio.

Este efecto es conocido como PARALLAX. Crea un falso efecto de profundidad 3D con imágenes en 2D

Este efecto se utiliza en las páginas web para mover la imagen de fondo de una zona determinada mientras nos movemos por la página. Para ello, necesitamos hacer uso de la función scroll() de jQuery. Si necesitas saber más sobre la función scroll() puede seguir el siguiente tutorial: enlace.

La función scroll() nos permite saber en cualquier momento a qué altura se encuentra el desplazamiento de la página. Con esta altura vamos a poder realizar los cálculos necesarios para crear el efecto parallax en los fondos que queramos. Para conseguir crear un parallax bastará con subir y bajar la imagen de fondo según hacemos scroll en la ventana. Es decir, si hacemos scroll hacia abajo, el fondo debe subir. En cambio, si hacemos scroll hacia arriba, el fondo debe bajar. De esta forma crearemos un efecto muy sorprendente y agradable a la vista.

Antes de empezar con el código, debemos tener claro cuál va a ser nuestra imágen de fondo. También tenemos que saber que la imagen tiene que tener más altura que la capa que la va a contener, ya que va a subir y bajar. También tiene que tener un ancho como mínimo igual al de la capa contenedora, para que no de sensación de vacío. Otra cosa a tener en cuenta es que el fondo no debe sobrepasar los límites. Una vez llegue a los límites, ya sea por arriba o por abajo, debe dejar de moverse.

¿Necesitas una impresora?

En este enlace encontrarás una selección de las mejores impresoras actuales

Ir a MejoresImpresoras.com

Con todos los conceptos claros, vamos a empezar a crear nuestro código para crear un efecto PARALLAX con jQuery

La imagen de fondo que vamos a utilizar es la que vamos a encontrar a continuación.

Nuestro proyecto va a formarse de la siguiente estructura de archivos:

Copy to Clipboard

El primer archivo que veremos será el index.html. En él, aparte de los enlaces a los diferentes archivos que necesitaremos, nos vamos a encontrar 3 capas div. De estas capas, la única que tendrá efecto parallax va a ser la segunda: capa-2; que tendrá como clase background-parallax.

El código del archivo index.html es el siguiente:

Copy to Clipboard

El siguiente fichero que vamos a crear es el index.css. Va a contener la clase background-parallax la cual va a ser importante para crear el efecto parallax. Como veremos ahora en el código, centraremos la imagen de fondo y cubriremos todo el espacio mediante css. Para ello utilizaremos los atributos background-position y background-size. Además, para suavizar todos los movimientos de la imagen de fondo y que no de pequeños saltos, vamos a utilizar una animación de transición.

El código del archivo index.css va a ser el siguiente:

Copy to Clipboard

El último archivo que tenemos que crear es el index.js. En este archivo es donde vamos a crear realmente el efecto parallax. Para ello vamos a analizar si hace scroll hacia arriba o hacia abajo en la página. Si nos movemos hacia abajo el scroll aumenta, en cambio si nos movemos hacia arriba el scroll disminuye. Para crear el efecto parallax con jQuery, bastará con subir el fondo si el scroll es hacia abajo, o bajar el fondo si el scroll es hacia arriba. Siempre tenemos que controlar que el fondo no se salga ni por arriba ni por abajo. Para ello, utilizaremos el atributo de css background-position-y el cual nunca debe ser menor de 0 ni mayor que 100.

¿Cómo podemos detectar si el scroll es hacia arriba o hacia abajo? Muy sencillo. Cada vez que se detecta un scroll, se almacena la posición en una variable auxiliar y se compara con la del siguiente scroll. Si el nuevo scroll es mayor que el valor de la variable auxiliar, significa que el scroll es hacia abajo. En cambio si el valor del scroll es menor que el de la variable auxiliar, significa que el scroll es hacia arriba.

Una vez tenemos claros todos los conceptos, vamos a crear codificar el archivo index.js. Lo primero que tendremos que hacer es detectar el scroll de la página con la función scroll() de jQuery.

Copy to Clipboard

Lo primero que hemos creado ha sido la variable auxiliar SCROLL_ACTUAL, que es la que va a almacenar el scroll anterior para compararlo con el nuevo. Todo lo que haya dentro de la función scroll() va a ser ejecutado cada vez que se detecte un movimiento en la página. Vamos a crear todo el código que se tiene que ejecutar cada vez que se dispare la función scroll(). Las líneas de código que escribamos a continuación tienen que ir todas dentro de la función scroll(). Lo primero que tendremos que saber es a qué altura de la página nos hemos quedado después del scroll. Para ello tenemos la función scrollTop() de jQuery, la cual nos devuelve un valor entero que es la distancia con la parte superior de la página.

Copy to Clipboard

El siguiente paso es saber cual es la altura actual del fondo que vamos a desplazar. Esta altura la podemos saber mediante el atributo background-position-y de css.

Copy to Clipboard

La variable parallax_position_y va a contener una variable de tipo String ya que el valor del atributo background-position-y siempre va acompañado de su unidad, en este caso un símbolo %. Como vamos a comparar este valor con un número entero, tendremos que eliminar dicho símbolo.

Copy to Clipboard

Ya tenemos todo listo para mover nuestro fondo y crear el efecto parallax. Lo único que nos queda será comparar el scroll nuevo con el anterior y que no sobrepase los límites. Si se cumplen algunas de estas condiciones, el fondo se desplazará como consecuencia de modificar el atributo background-position-y de css. Este atributo lo modificaremos mediante la función css de jQuery.

Copy to Clipboard

Por último, antes de abandonar la función scroll(), tenemos que almacenar el valor del scroll actual en la variable temporal.

Copy to Clipboard

Con esta línea damos por finalizado el archivo index.js. Su código completo será el siguiente:

Copy to Clipboard

Como en todos los tutoriales, a continuación puedes encontrar los enlaces de la demostración y de la descarga del proyecto completo.

4.8 (95.91%) 44 votes

2020-10-09T09:24:31+00:00