Introducción
El CSS moderno es una poderosa herramienta que puede usar para crear muchas funciones de interfaz de Usuario avanzada (UI). En el pasado, estas características dependían de bibliotecas JavaScript.
En esta guía, configurará algunas líneas CSS para crear un efecto de paralaje de desplazamiento en una página web. Utilizará imágenes de placekitten.com como imágenes de fondo de marcador de posición.
Tendrá una página web con un efecto de paralaje de desplazamiento CSS puro una vez que haya completado el tutorial.
Advertencia: Este artículo utiliza propiedades CSS experimentales que no funcionan en todos los navegadores. Este proyecto ha sido probado y funciona en Chrome.
Esta técnica no funciona bien en Firefox, Safari e iOS debido a algunas de las optimizaciones de esos navegadores.
Paso 1: Creación de un nuevo proyecto
En este paso, use la línea de comandos para configurar una carpeta y archivos de proyecto nuevos. 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, llama la carpeta css-parallax. Ahora, el cambio en el css-parallax carpeta:
- cd css-parallax
a continuación, crear un index.html archivo css-parallax carpeta con la etiqueta nano comando:
- nano index.html
va a poner todo el código HTML para el proyecto en este archivo.
En el siguiente paso, comenzará a crear la estructura de la página web.
Paso 2-Configuración de la estructura de la aplicación
En este paso, agregará el HTML necesario 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.
Agregue el siguiente código dentro de 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 uno será un fondo estático y plano.
En los siguientes pasos, agregará los estilos para cada sección utilizando las clases que agregó en HTML.
Paso 3: Crear un archivo CSS y Agregar CSS inicial
En este paso, creará un archivo CSS. Luego agregará el CSS inicial necesario para darle estilo al sitio web y crear el efecto de paralaje.
Primero, cree un archivo styles.css en su carpeta css-parallax con el comando nano :
- nano styles.css
Aquí es donde colocará todo el CSS necesario para crear el efecto de desplazamiento de paralaje.
A continuación, comience con la clase .wrapper. Dentro de su archivo styles.css agregue 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 de la envoltura debe establecerse en un valor fijo para que el efecto funcione. Puede usar la unidad de vista vh establecida en 100 para obtener la altura completa de la vista de la pantalla.
Al escalar las imágenes, agregarán una barra de desplazamiento horizontal a la pantalla, para que pueda deshabilitarla agregando overflow-x: hidden;. La propiedad perspective simula la distancia desde la ventana a los pseudo elementos que creará y transformará más abajo en CSS.
En el siguiente paso, agregarás más CSS para darle estilo a tu página web.
Paso 4-Añadir estilos para el .clase de sección
En este paso, agregará estilos a la clase .section.
Dentro de su archivo styles.css agregue el siguiente código debajo de la clase de envoltura:
.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 visualización y las propiedades de texto de las secciones principales.
Establezca una posición de relative para que el elemento secundario, .parallax::after pueda posicionarse absolutamente en relación con el elemento padre .section.
Cada sección tiene un view-height(vh) de 100 para ocupar toda la altura de la ventana. Este valor se puede cambiar y establecer a la altura que prefiera para cada sección.
Finalmente, el resto de las propiedades CSS se utilizan para dar formato y añadir estilo al texto dentro de cada sección. Coloca el texto en el centro de cada sección y agrega un color de white.
A continuación, agregará un pseudo-elemento y le dará estilo para crear el efecto de paralaje en dos de las secciones de su HTML.
Paso 5-Añadir estilos para el .Clase de paralaje
En este paso, agregará los estilos a la clase .parallax.
Primero, agregará un pseudo-elemento en la clase .parallax para que se le dé estilo.
Nota: Puede visitar los documentos web de MDN para obtener más información sobre los pseudo elementos CSS.
Agregue el siguiente código debajo de .section clase:
....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.parallaxañade un pseudo-elemento ::after a la imagen de fondo y proporciona las transformaciones necesarias para el efecto de paralaje.
El pseudo-elemento es el último hijo del elemento con la clase .parallax.
La primera mitad del código muestra y posiciona el elemento psuedo. La propiedad transform aleja el pseudo-elemento de la cámara en el z-index, luego lo escala de nuevo para llenar la ventana.
Debido a que el pseudo-elemento está más lejos, parece moverse más lentamente.
En el siguiente paso, agregará las imágenes de fondo y el estilo de fondo estático.
Paso 6: Agregar las Imágenes y el Fondo Para Cada Sección
En este paso, agregará las propiedades finales CSS para agregar las imágenes de fondo y el color de fondo de la sección estática.
Primero, agregue un color de fondo sólido 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;}...El .static clase agrega un fondo para la sección estática que no tiene una imagen.
Las dos secciones con la clase .parallax también tienen una clase adicional que es diferente para cada una. Utilice las clases .bg1 y .bg2 para agregar las imágenes de fondo de gatito.
Agregue 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 agregan las imágenes de fondo respectivas para cada sección.
Las imágenes son del sitio web de placekitten. Es un servicio para obtener imágenes de gatitos para usar como marcadores de posición.
Ahora que todo el código para el desplazamiento de paralaje efecto se añade, se puede vincular a su styles.css archivo index.html.
Paso 7-Estilos de enlace.css e índice de apertura.html en su navegador
En este paso, vinculará su archivo styles.css y abrirá el proyecto en su navegador para ver el efecto de desplazamiento de paralaje.
Primero, agregue el siguiente código a la etiqueta <head> en el archivo 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 su archivo index.html en su navegador:
Con eso, ha configurado una página web funcional con un efecto de desplazamiento. Echa un vistazo a este repositorio de GitHub para ver el código completo.
Conclusión
En este artículo, establecer un proyecto con un index.html y styles.css archivo y ahora tiene una página web funcional. Agregaste la estructura de tu página web y creaste estilos para las distintas secciones del sitio.
Es posible poner las imágenes que utiliza o el efecto de paralaje más lejos 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 una imagen de fondo se desplace en absoluto, use background-attachment: fixed; en lugar de perspective/translate/scale.