El CSS moderno ha redefinido el desarrollo web con sus potentes funcionalidades y capacidades extraordinarias. CSS es una herramienta única que ofrece opciones destacadas para hacer que las páginas web sean altamente interactivas y atractivas. Ya sea por la flexibilidad en el diseño, la rápida personalización, las excelentes opciones de estilo o la interfaz de usuario (UI) avanzada, CSS aporta soluciones integrales para todas las necesidades de desarrollo y estilo web. Por encima de todo, usar CSS y HTML, permite añadir animaciones y efectos escribiendo solo unas pocas líneas de código, lo que de otro modo resultaría laborioso con JavaScript.
En esta guía, le guiaremos a través de los pasos para crear un efecto de desplazamiento parallax con CSS en Chrome.
Requisitos previos
Para seguir este tutorial, debe tener conocimientos básicos de HTML y CSS.
Paso 1: Crear un nuevo proyecto
Comencemos creando una nueva carpeta de proyecto y archivos utilizando la interfaz de línea de comandos. Abra su terminal y escriba el siguiente comando para crear una nueva carpeta de proyecto:
|
1 |
mkdir css-parallax |
Use el comando cd para cambiar el directorio a la carpeta css-parallax :
|
1 |
cd css-parallax |
A continuación, cree un archivo HTML en la carpeta css-parallax donde colocaremos todos los códigos HTML. Nombre el archivo index.html y ábralo usando el comando nano :
|
1 |
nano index.html |
Una vez que tengamos nuestro archivo index.html listo, sigamos adelante y estructuremos la página web añadiendo los códigos HTML introductorios.
Paso 2: Estructura del HTML básico
En este paso, diseñaremos nuestra página web añadiendo los códigos HTML. Añada las siguientes líneas de código en el archivo index.html :
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Efecto de desplazamiento Parallax con CSS</title> </head> <body></body> </html> |
Después de configurar la estructura básica de nuestras páginas web, cree tres clases de sección: dos para las imágenes de fondo y una para el fondo plano estático. A continuación, añada las siguientes líneas de código en la etiqueta <body> :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> ... <main class="wrapper"> <section class="section parallax bg1"> <h1>Antes del efecto de desplazamiento Parallax</h1> </section> <section class="section static"> <h1>Bienvenido al desplazamiento Parallax</h1> </section> <section class="section parallax bg2"> <h1>Después del efecto de desplazamiento Parallax</h1> </section> </main> ... </body> |
Al insertar los códigos HTML en la etiqueta <body> se completa la configuración básica de nuestro archivo html.file. En los próximos pasos, introduciremos CSS y definiremos las opciones de estilo para cada uno.
Paso 3: Introducción a CSS
Vamos a dar estilo al sitio web añadiendo el archivo CSS y creando el efecto parallax. Primero, cree un archivo CSS en la carpeta css-parallax carpeta donde colocaremos todos los códigos CSS necesarios para crear el efecto de desplazamiento parallax. Después de eso, inserta un styles.css archivo en tu css-parallax carpeta usando el comando nano comando:
|
1 |
nano styles.css |
Diseñaremos nuestra página web comenzando con la clase .wrapper . La clase .wrapper establece las propiedades de perspectiva y desplazamiento para toda la página. Comienza con la clase wrapper y especifica su altura, desbordamiento y perspectiva. Establece la altura del wrapper a un valor constante para que funcione el efecto de desplazamiento parallax. En esta guía, hemos establecido el valor del viewport usando 100vh para obtener la altura completa del viewport de la pantalla. Puedes modificar el valor vh según las necesidades de tu proyecto. A continuación, desactiva la barra de desplazamiento horizontal de la pantalla estableciendo la propiedad overflow-x como hidden. Además, especifica el valor de la propiedad perspective como 3px. Agreguemos las siguientes líneas de código en la clase del archivo styles.css :
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
Paso 4: Añadir estilo para la clase .section
Junto a la clase wrapper, añade estilos a la clase .section . La clase .section define las propiedades de tamaño, visualización y texto para las secciones principales. Establece la posición como relative para alinear un posicionamiento relativo del elemento hijo .parallax::after y el elemento padre .section. Mantén la altura de vista view-height(vh) como 100 para obtener la altura completa del viewport de la pantalla. Añade, modifica y diseña los demás parámetros según tus necesidades.
Dentro de tu archivo styles.css añade el siguiente código junto a la clase wrapper:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.wrapper { height: 100vh; overflow-x: hidden; perspective: 3px; } .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: red; text-shadow: 0 0 5px #000; } |
A continuación, añadiremos un pseudoelemento y le daremos estilo para crear el efecto parallax y ponerlo en acción.
Paso 5: Añadir estilos para la clase .parallax
En este paso, añadiremos un pseudoelemento en la clase .parallax. Este pseudoelemento será el último hijo del elemento y añadirá un pseudoelemento ::after a la imagen de fondo responsable de iniciar el efecto parallax. En la primera mitad del código, se configura la especificación de visualización básica y el posicionamiento del pseudoelemento. En la siguiente mitad, añadiremos la propiedad transform usando la función CSS translateZ() y la mantendremos como (-1px). Además, añade un z-index para controlar el apilamiento vertical.
Añade el siguiente código debajo de la clase .section :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
... .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000; } .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } ... |
Paso 6: Añadir imágenes y fondo para cada sección
Let’s add the final CSS finales en las imágenes de fondo y el color de fondo de la sección estática. Comienza añadiendo un color de fondo sólido a la sección .static . Establece el color de fondo como aqua y añade el siguiente código después de la clase .parallax::after :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } .static { background: aqua; } ... |
La .static clase añade un fondo a la sección estática que no tiene una imagen. Las otras dos secciones con la .parallax clase tienen clases únicas destinadas a contener imágenes de fondo. Añade las URL de las imágenes de fondo en las clases .bg1 y .bg2 respectivamente.
En este tutorial, estamos usando imágenes aleatorias de Unsplash. También puedes usar imágenes de otros sitios web como Pixapay, Placekitten, y Pexels, por nombrar algunos, y personalizarlas como quieras. Añade el siguiente código a la clase .static :
|
1 2 3 4 5 6 7 8 9 10 |
... .static { background: aqua; } .bg1::after { background-image: url('https://images.unsplash.com/photo-1496543622559-12e927bdd81b'); } .bg2::after { background-image: url('https://images.unsplash.com/photo-1516422641841-cd9803ab02c6'); ... |
Paso 7: Conectar CSS con HTML
Ahora que hemos añadido todo el código para el efecto de desplazamiento parallax, vinculemos el archivo styles.css con el archivo index.html:
|
1 2 3 4 5 6 7 8 9 10 |
... <head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Efecto de desplazamiento parallax con CSS</title> </head> ... |
Abre index.html que hemos creado en el Paso 2 y en el navegador Chrome:
Conclusión
En este tutorial, seguimos los pasos para configurar una página web en funcionamiento utilizando una configuración básica. Hay muchas otras opciones interesantes y de personalización con las que puedes experimentar. Puedes intentar añadir efectos de sombra, modificar el desplazamiento de las imágenes y realizar otros ajustes para que tu aprendizaje sea divertido y emocionante.
Para profundizar más en temas de desarrollo web, consulta estos recursos de nuestro blog:
- Una guía sobre cómo añadir JavaScript a HTML
- Trabajando con JavaScript: Qué son los objetos
- Qué es jQuery y cómo puedes usarlo
¡Feliz programación!
Comentarios
Aún no hay comentarios. Sea el primero.