Parallax es un efecto que se aplica generalmente a las imágenes de fondo de una página web, y que consiste en mantener estático, o mover a una velocidad distinta, el resto de los elementos de la página al hacer scroll. Pareceŕa de esa forma que la página tiene profundidad. En mi página de ejemplo a la que hacía referencia en este post, puede verse aplicado en la portada o zona «Hero».
esto se consigue de una forma muy sencilla. Sólo tienes que crear un div en el HTML y ponerle una clase, p. ej. «.parallax», y luego, en el CSS, en esa clase, incluir la altura que le darás al div y la imagen de fondo que le vas a poner. Por supuesto, dentro de ese div puedes incluir texto, imágenes… En el caso del ejemplo mencionado puse el título de la página.
min-height: 100vh;
background: url("fondo.jpg") center/cover no-repeat fixed;
Estas son las dos líneas que he incluido en mi código para lograrlo. La primera le dice al navegador que el div va a tener la altura de la ventana del navegador, sea esta cual sea. Pero también se puede poner un valor fijo, por ejemplo height: 300px.
La segunda le dice al navegador que el div va a tener una imagen de fondo, en este caso fondo.jpg, y que la tiene que poner centrada vertical y horizontalmente (center), ocupando todo el ancho del div (cover), y poniéndola fija (fixed) para que no se mueva. Este es el efecto que buscamos.
El fixed lo hace todo. El fondo del div permanecerá estático, y la página lo irá tapando a medida que hacemos scroll hacia abajo.
En esta otra página landing que realicé para un evento, puede verse un uso parecido de efecto parallax a modo de cortinilla o separador de sus distintas secciones.
Este efecto tiene un inconveniente, y es que no funciona bien en el navegador Safari en iOS (iPad/iPhone), como se comenta aquí, aunque es posible encontrar soluciones más o menos imaginativas buscando por Internet.
Mis páginas de ejemplo con este efecto Parallax:
- post
El efecto Parallax puede complicarse aún más para conseguir resultados increibles. Aquí puedees ver algunos ejemplos.
Actualización. Francesc, un compañero del bootcamp que estoy realizando, me pasa un interesante video de Walt Disney sobre cómo se aplica este efecto en las películas de animación. ¡Gracias por el aporte!