0

Tutorial: Efecto Parallax

Profesor

En este post aprenderás a implementar el efecto de scroll parallax en tu página web. Vamos a poner en práctica el más sencillo de todos, donde el contenido se desplaza de forma normal sobre un fondo fijo o inmóvil.

 
¿Qué es el efecto parallax?

Parallax es un efecto donde la posición de un objeto parece ser diferente cuando se ve desde diferentes posiciones. El scroll parallax nos da la ilusión de que dos objetos con distancia entre ellos parecen moverse a diferentes velocidades.

 
Por ejemplo, podemos pensar que si miramos a través de la ventanilla de un coche en movimiento a cierta velocidad, los postes del tendido eléctrico pasan a un ritmo alto mientras que el paisaje del fondo parece moverse muy lentamente.

 
Marcas y Estructura
Para lograr un efecto parallax en scroll, es necesario tener un sitio web responsive y conocimientos básicos de CSS. En primer lugar, vamos a alternar las marcas background/heading-text sections y content sections para conseguir el máximo efecto. Se vería de la siguiente forma:

 .Código 1 

 

Cada section con una clase de parallax contendrá imágenes de fondo y un texto en cabecera, mientras que cada section con una clase de content serán simples secciones con contenido. La clase de container es un div con una anchura máxima para hacer que el diseño responsivo sea muy simple.

.
Estilos y hacer que funcione con CSS

El primer punto a destacar e s que todas las imágenes de fondo tienen un ancho o width de 1600px y un largo o height de 600px. Esto permite establecer las secciones parallax a una altura fija de 600px.

  

En este ejemplo, utilizamos diferentes imágenes de fondo (tres para ser concretos) y como no podemos esperar que todos los usuarios tengan dispositivos que permitan ver las imágenes completas con su ancho máximo, necesitaremos hacer uso de la propiedad CSS background-size y establecerla como cover. Esto obliga a la imagen de fondo a ocupar el espacio total disponible expandiéndolo de forma proporcional.

  

Ahora solo nos falta los más importante: hacer que la imagen de fondo permanezca fija mientras el contenido en scroll pasa por encima de ella. De nuevo, recurrimos a CSS utilizando la propiedad background-attachment y estableciéndola como fixed:

 .

Código 2

 

Para terminar, puedes ver la demo y si te animas, puedes descargarte los  archivos que Nick Salloum ha dejado a disposición pública pinchando aquí.

 .

Entonces, ¿te atreves a darle un lavado de cara a tu web en esta vuelta al cole? Si es así, o si ya lo tienes, ¡no te cortes y presume de sitio en un comentario, en Facebook o en Twitter!

Host Europe

Host Europe

Host Europe es más que un proveedor de hosting y dominios. Nos ganamos tu confianza día a día gracias a años de experiencia y el mejor servicio.

More Posts

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *