JavGuerra,
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. Parecerá 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. Puedes encontrar ejemplos con sólo una búsqueda.