Tutorial
Cómo crear un efecto de paralaje de desplazamiento con Pure CSS en Chrome
Introducción
Modern CSS es una potente herramienta que puede usar para crear diversas funciones avanzadas de interfaz de usuario (UI). En el pasado, estas funciones dependían de las bibliotecas de JavaScript.
En esta guía, configurará algunas líneas CSS para crear un efecto de paralaje de desplazamiento en una página web. Usará imágenes de placekitten.com como imágenes de marcador de posición en segundo plano.
Tendrá una página web con un efecto puro de paralaje de desplazamiento de CSS una vez que haya completado el tutorial.
Advertencia: En este artículo, se utilizan propiedades experimentales de CSS que no funcionan en los distintos navegadores. Este proyecto se probó y funciona en Chrome. Esta técnica no funciona bien en Firefox, Safari e iOS por algunas de las optimizaciones de esos navegadores.
Paso 1: Crear un nuevo proyecto
En este paso, utilice la línea de comandos para configurar una nueva carpeta y archivos de proyecto. Para comenzar, abra su terminal y cree una nueva carpeta de proyecto.
Escriba el siguiente comando para crear la carpeta del proyecto:
- mkdir css-parallax
En este caso, nombre la carpeta css-parallax. Ahora, posiciónese en la carpeta css-parallax:
- cd css-parallax
Luego, cree un archivo index.html en su carpeta css-parallax con el comando nano:
- nano index.html
Pondrá todo el HTML para el proyecto en este archivo.
En el siguiente paso, comenzará a crear la estructura de la página web.
Paso 2: Configurar la estructura de la aplicación
En este paso, añadirá el HTML que necesita para crear la estructura del proyecto.
Dentro de su archivo index.html, agregue el siguiente código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Scrolling Parallax</title>
</head>
<body></body>
</html>
Esta es la estructura básica de la mayoría de las páginas web que utilizan HTML.
Añada el siguiente código en la etiqueta <body>:
<body>
...
<main>
<section class="section parallax bg1">
<h1>Cute Kitten</h1>
</section>
<section class="section static">
<h1>Boring</h1>
</section>
<section class="section parallax bg2">
<h1>Fluffy Kitten</h1>
</section>
</main>
...
</body>
Este código crea tres secciones diferentes. Dos tendrán una imagen de fondo, y una será un fondo estático y simple.
En los siguientes pasos, añadirá los estilos para cada sección usando las clases que añadió en el HTML.
Paso 3: Crear un archivo CSS y agregar el CSS inicial
En este paso, creará un archivo CSS. Luego, añadirá en el CSS inicial que necesita para diseñar el sitio web y crear el efecto de paralaje.
Primero, cree el archivo styles.css en su carpeta css-parallax con el comando nano:
- nano styles.css
Aquí es donde pondrá todo el CSS que necesita para crear el efecto de paralaje de desplazamiento.
Luego, comience con la clase .wrapper. Dentro de su archivo styles.css, añada el siguiente código:
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
La clase .wrapper establece las propiedades de perspectiva y desplazamiento para toda la página.
La altura del wrapper debe configurarse en un valor fijo para que el efecto funcione. Puede usar la unidad del área de visualización (viewport) vh configurada a 100 para obtener la altura completa del área de visualización de la pantalla.
Cuando escale las imágenes, se añadirá una barra de desplazamiento horizontal a la pantalla para que pueda deshabilitarla añadiendo overflow-x: hidden;. La propiedad perspective simula la distancia desde el área de visualización a los seudoelementos que creará y transformará más adelante en el CSS.
En el siguiente paso, va a añadir más CSS para diseñar su página web.
Paso 4: Añadir estilos a la clase .section
En este paso, añadirá estilos a la clase .section.
Dentro de su archivo styles.css, añada el siguiente código debajo de la clase wrapper:
.wrapper {
height: 100vh;
overflow-x: hidden;
perspective: 2px;
}
.section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 0 0 5px #000;
}
La clase .section define el tamaño, la pantalla y las propiedades de texto para las secciones principales.
Establezca una posición de relative para que el elemento secundario, .parallax::after pueda posicionarse de manera absoluta en relación con el elemento principal .section.
Cada sección tiene un view-height(vh) de 100 para ocupar la altura completa del área de visualización. Este valor puede modificarse y configurarse a la altura que prefiera para cada sección.
Finalmente, las propiedades de CSS restantes se utilizan para dar formato y agregar estilo al texto dentro de cada sección. Posiciona el texto en el centro de cada sección y agrega un color blanco (white).
El siguiente paso es añadir un seudoelemento y agregarle estilo para crear el efecto de paralaje en dos de las secciones en su HTML.
Paso 5: Añadir estilos a la clase .parallax
En este paso, añadirá los estilos a la clase .parallax.
Primero, añadirá un seudoelemento en la clase .parallax a la que agregará el estilo.
Nota: Puede visitar la documentación web de MDN para obtener más información sobre los seudoelementos de CSS.
Añada el siguiente código debajo de la clase .section:
...
.section {
position: relative;
height: 100vh;
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;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
...
La clase .parallax añade un seudoelemento ::after a la imagen de fondo y proporciona las transformaciones necesarias para el efecto de paralaje.
El seudoelemento es el último elemento secundario del elemento con la clase .parallax.
La primera mitad del código muestra y posiciona el seudoelemento. La propiedad transform mueve el seudoelemento lejos de la cámara en el z-index y, luego, lo escala de vuelta para llenar el área de visualización.
Dado que el seudoelemento está más lejos, parece moverse más lentamente.
En el siguiente paso, añadirá las imágenes de fondo y el estilo de fondo estático.
Paso 6: Añadir las imágenes y el fondo para cada sección
En este paso, añadirá las propiedades finales de CSS para añadir las imágenes y el color de fondo de la sección estática.
Primero, añada un color sólido de fondo a la sección .static con el siguiente código después de la clase .parallax::after:
...
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
.static {
background: red;
}
...
La clase .static agrega un fondo a la sección estática que no tiene ninguna imagen.
Las dos secciones con la clase .parallax también tienen otra clase que es diferente para cada una. Utilice las clases .bg1 y .bg2 para añadir las imágenes de fondo de Kitten.
Añada el siguiente código a la clase .static:
...
.static {
background: red;
}
.bg1::after {
background-image: url('https://placekitten.com/g/900/700');
}
.bg2::after {
background-image: url('https://placekitten.com/g/800/600');
}
...
Las clases .bg1, .bg2 añaden las imágenes de fondo respectivas para cada sección.
Las imágenes son del sitio web placekitten. Es un servicio para obtener imágenes de gatitos y utilizarlas como marcadores de posición.
Una vez que añada el código completo para el efecto de paralaje de desplazamiento, puede vincularlo al archivo styles.css en el archivo index.html.
Paso 7: Vincular styles.css y abrir index.html en su navegador
En este paso, vinculará el archivo styles.css y abrirá el proyecto en su navegador para ver el efecto de paralaje de desplazamiento.
Primero, añada el siguiente código a la etiqueta <head> en el archivo index.html:
[label css-parallax/index.html] ...
<head>
<meta charset="UTF-8" />
<^>
<link rel="stylesheet" href="styles.css" />
<^>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Parallax</title>
</head>
...
Ahora, puede abrir el archivo index.html en su navegador:
Al hacer esto, habrá configurado una página web con un efecto de desplazamiento. Consulte este repositorio de GitHub para ver el código completo.
Conclusión
En este artículo, configuró un proyecto con un archivo index.html y styles.css, y ahora tiene una página web funcional. Modificó la estructura de su página web y creó estilos para las diversas secciones en el sitio.
Las imágenes utilizadas o el efecto de paralaje se pueden alejar aún más para que se muevan más lentamente. Tendrá que cambiar la cantidad de píxeles en las propiedades perspective y transform. Si no desea que la imagen de fondo se desplace en absoluto, utilice background-attachment: fixed; en vez de perspective/translate/scale.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
author
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Featured on Community
Get our biweekly newsletter
Sign up for Infrastructure as a Newsletter.
Hollie's Hub for Good
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Become a contributor
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
