El efecto parallax o paralaje, en español, es una técnica de diseño web que crea una sensación de profundidad al hacer que el contenido de la página se mueva a diferentes velocidades cuando el usuario hace scroll o se desplaza por la página. El contenido en el que se suele aplicar un parallax es sobre imágenes o texturas de fondo que se desplazan a una velocidad menor que el contenido superpuesto, creando una sensación de profundidad y dinamismo.
1. Cómo crear un efecto parallax con HTML y CSS
A continuación, veremos cómo implementar el efecto parallax en un sitio web mediante HTML y CSS.
2. ¿Qué es el efecto parallax o paralaje?
El efecto parallax se basa en el principio de que los objetos cercanos se mueven más rápido que los objetos distantes. En el contexto del diseño web, esto se traduce en capas de contenido que se mueven a diferentes velocidades a medida que el usuario se desplaza por la página. Este efecto se suele usar para mejorar la experiencia de usuario y conseguir destacar ciertos elementos de la página.
3. Otros nombres y conceptos relacionados con el parallax
Además de «parallax,» esta técnica también es conocida por varios otros términos en el ámbito del diseño web y la animación. Algunos de los nombres y conceptos relacionados incluyen:
- Scrolling effect (efecto de desplazamiento): Se refiere a cualquier tipo de animación o cambio visual que ocurre al desplazarse por la página.
- Parallax scrolling: Específicamente se refiere a la técnica donde las capas de contenido se mueven a diferentes velocidades para crear un efecto de profundidad.
- Depth effect (efecto de profundidad): Hace referencia a la percepción de tridimensionalidad creada por el movimiento diferencial de elementos.
- Layered scrolling: Implica el uso de múltiples capas de contenido que se desplazan a velocidades diferentes.
- Scroll-based animation (animación basada en desplazamiento): Incluye cualquier tipo de animación que se activa mediante el desplazamiento del usuario.
- Fixed background scrolling: Una variación del efecto parallax donde el fondo se fija y el contenido se desplaza sobre él.
4. Pasos para crear un efecto parallax
4.1. Crear los contenedores en HTML
En primer lugar, debemos crear la estructura básica del código HTML. En este caso, creamos un contenedor principal que contendrá el fondo con el efecto parallax y un contenedor dentro del contenedor principal para mostrar el contenido:
<div class="parallax">: Este es el contenedor principal que tendrá la imagen de fondo con el efecto parallax.<div class="content">: Este contenedor es para el contenido que se encuentra dentro del parallax. En este ejemplo, incluye un encabezado (<h1>) y un párrafo (<p>).
<div class="parallax">
<div class="content">
<h1>Bienvenido a Nuestro Sitio</h1>
<p>Disfruta de este efecto parallax mientras te desplazas.</p>
</div>
</div>
4.2. Agregar las propiedades CSS
El siguiente paso es añadir el CSS para crear el efecto parallax. Para hacer un efecto parallax necesitará conocer ciertas propiedades para aplicarlas sobre el contenedor principal. En nuestro caso el contenedor con la clase .parallax. Veamos las propiedades aplicar:
.parallax: Aplicamos estilos al contenedor del parallax.background-image: URL de la imagen de fondo.height: Define la altura del contenedor.background-attachment: Fija la imagen de fondo para crear el efecto parallax.background-position: Centra la imagen de fondo.background-repeat: Evita que la imagen de fondo se repita.background-size: Asegura que la imagen cubra todo el contenedor.
bbody, html {
margin: 0;
font-family: Arial, sans-serif;
}
.parallax {
background-image: url('tuimagen.jpg');
height: 600px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
height: 500px;
text-align: center;
padding: 50px;
}
Si tienes dudas sobre las propiedades anteriores puedes visitar el artículo completo sobre colores y fondos en CSS, en este artículo hay ejemplos detallados del uso de cada propiedad.
Ejemplo en CodePen
Asegúrate de que las imágenes que utilices tengan una alta resolución para evitar que se vean borrosas en pantallas grandes.
4.3. Ejemplo práctico parallax con fondo fijo
Este ejemplo representa un típico Call to Action con un contenedor con una imagen de fondo que invita a los usuarios a realizar una acción específica, como comprar un producto o suscribirse a un servicio.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Call to Action</title>
<style>
*{font-family: Arial;}
.cta-container {
background-image: url("cta-background.jpg"); /* Imagen de fondo */
background-size: cover; /* Cubre completamente el contenedor */
background-position: center center; /* Centra la imagen */
background-repeat: no-repeat; /* No se repite la imagen de fondo */
background-attachment: fixed; /* Fondo fijo en la ventana */
opacity: 0.9; /* Opacidad del contenedor */
text-align: center; /* Alineación del contenido al centro */
padding: 60px;
}
.cta-text {
font-size: 24px;
}
.cta-button {
background-color: #FF5733; /* Color de fondo del botón */
color: #fff; /* Color del texto del botón en blanco */
padding: 10px 20px; /* Relleno del botón */
border: none; /* Sin borde */
border-radius: 5px; /* Bordes redondeados */
font-size: 18px;
cursor: pointer; /* Cambio de cursor al pasar el ratón */
}
</style>
</head>
<body>
<div class="cta-container">
<h2 class="cta-text">¡Descubre nuestro producto estrella!</h2>
<p class="cta-text">Obtén un 20% de descuento en tu primera compra.</p>
<button class="cta-button">Comprar Ahora</button>
</div>
</body>
</html>
En este ejemplo, hemos creado un contenedor de llamada a la acción (cta-container) con una imagen de fondo (cta-background.jpg). A continuación, se aplican las siguientes propiedades:
background-size: cover: Hace que la imagen de fondo cubra completamente el contenedor.background-position: center center: Centra la imagen de fondo vertical y horizontalmente.background-repeat: no-repeat: Evita que la imagen de fondo se repita.background-attachment: fixed: Fija el fondo en la ventana, lo que crea un efecto de parallax o paralaje.opacity: 0.9: Aplica una opacidad del 90% al contenedor, haciendo que la imagen de fondo sea ligeramente visible a través del contenido.
El texto dentro del contenedor (cta-text) se centra en el centro del contenedor. El botón de llamada a la acción (cta-button) tiene un color de fondo, un color de texto en blanco, bordes redondeados y un cambio de color al pasar el ratón.
Ejemplo en CodePen
4.4. Ejemplo práctico sin fondo fijo
Veamos otro ejemplo de Call to Action. En este caso no vamos a usar la propiedad background-attachment: fixed. Como puedes ver, en este ejemplo, no se aprecia el efecto de paralaje, ya que la imagen no queda fija en el fondo y se desplaza junto con el contenedor.
.hero-image {
background-image: url("https://www.eniun.com/wp-content/uploads/eniun-home-historia.jpg");
height: 400px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
Ejemplo en CodePen
Como ves, el efecto parallax puede añadir un toque visual atractivo a tu sitio web. Con unos pocos ajustes en tu HTML y CSS, puedes implementar fácilmente este efecto y mejorar la experiencia del usuario. Esperamos que este artículo te haya sido de ayuda y que puedas implementar el efecto parallax en tus proyectos.