El efecto Parallax

Parallax es un efecto visual muy empleado en el diseño web de hoy en día. Consiste en una imagen de fondo que se desplaza cuando de hace scrolling sobre los contenidos de la página. Sin embargo, la imagen de fondo se desplaza a una velocidad inferior a los contenidos, de modo que, cuando el usuario desplaza la página, mediante las flechas de scroll, el cursor o la rueda del ratón, se logra el efecto de que las secciones de contenido «flotan» sobre la imagen de fondo.

Se emplea muchísimo el parallax en landings o en la página principal de un sitio corporativo. Aunque podemos poner efectos parallax en todas las páginas de un sitio, o en todas las vistas de una SPA, si lo deseamos, no es de buen gusto. Lo que queda muy bien en la página principal, puede llegar a ser molesto, si abusamos de ello. Tiene que estar muy bien diseñado un sitio para que un parallaz quede bien en todas sus páginas, o en la mayoría de ellas. Los hay, pero no son habituales.

Hasta hace unos años, lograr un efecto parallax era una ardua tarea de programación. Hoy día, con materialize, se hace con una facilidad extrema, y con un mínimo de líneas de código, como vamos a ver en este artículo.

PREPARANDO EL ESCENARIO

Vamos a preparar un proyecto con una sola vista de ejemplo en el AppComponent. En esta vista habrá dos secciones de contenidos, y dos imágenes parallax, para que podamos desplazarnos arriba y abajo, y observar el resultado.

Lo primero, como es lógico, es empezar creando el proyecto, al que vamos a llamar ang6-parallax. Después, instalaremos jQuery y materialice css como ya hemos detalladado en el artículo anterior, y crearemos las referencias necesarias en angular.json. Por último, añadiremos, en index.html, la línea que vimos, también en el artículo anterior, para cargar los iconos de Material Design. Aunque en este proyecto no vamos a usarlos, es mejor que nos acostumbremos a cargarlos siempre que usemos materialize.

En el directorio src/assets/ crearemos una carpeta llamada images y, dentro de ella, otra llamada backgrounds. Dentro de esta vamos a tener las dos imágenes de fondo que usaremos para nuestro efecto parallax. Las vamos a llamar, para este ejemplo, bg_01.jpg y bg_02.jpg. Por supuesto, tu puedes darle a tus carpetas e imágenes los nombres que quieras. Recuerda que, cuando vayas a buscar en Internet imágenes para tus páginas, debes asegurarte de que sean libres de derechos, para no incurrir en infracciones. Un buen sitio, donde puedes encontrar una gran batería de imágenes libres y descargarlas gratutitamente en diversas resoluciones es https://pixabay.com/es/.

EL AppComponent

Este es el componente donde vamos a incluir el efecto parallax para que veas como funciona. Lo primero es crear la vista. En app.component.html vamos a empezar por colocar una barra de navegación fija en la parte superior de la página. En este caso no la vamos a crear como un componente aparte para integrar después, porque sólo es para que se vea como qudaría. Ni siquiera la vamos a dotar de enlaces operativos, ya que, para ver el efecto parallax no es necesario tener más vistas, ni un sistema de navegación, pero la incluimos porque, en un proyecto real, si existiría. De este modo, simulamos un escenario.

Lo siguiente que hacemos es incluir la primera imagen que formará parte del parallax (la que se desplazará con los contenidos, aunque de forma «desincronizada» (es decir, más despacio que estos). Debemos incluuir la imagen dentro de un contenedor con la clase parallax que, a su vez, vaya dentro de otro contendor con la clase parallax-container, así:

Debajo metemos los contenidos que queremos desplazar de modo «flotante». Después, en este caso, hemos incluido una segunda imagen parallax y un segundo agrupamiento de contenidos. Aunque esto no es habitual, es para que veas que puede hacerse.

En el contolador (app.component.ts, en este ejemplo), incluimos lo siguiente, dentro del método ngOnInit():

Y ya está. Sólo tienes que arrancar el servidor, probarlo y ver como funciona.

CONCLUYENDO

Como ves, crear un efecto parallax en muestro proyecto Angular con materialize es tan fácil y rápido que casi resulta aburrido, pero el resultado visual es perfecto. Si quieres, puedes leer más al respecto en https://materializecss.com/parallax.html. Como siempre, este proyecto te lo puedes descargar completo en este enlace.