Técnicas CSS
Para un desarrollador web, cuando se trata de crear un efecto de desplazamiento de paralaje, hay varias técnicas disponibles. Una de esas técnicas está utilizandoCascaded Styling Sheets(CSS).
CSS explica cómo se muestran los elementos HTML en la pantalla. Se puede crear un archivo CSS y se puede utilizar para el sitio web completo. Es más sencillo agregar un archivo CSS que agregar estilos a cada elemento HTML y administrarlos en diferentes partes de la página web.
Note- Algunos de los métodos que se describen a continuación en este capítulo son específicos para computadoras de escritorio y no para dispositivos móviles. Se mencionará en los pasos cuando una técnica en particular no sea adecuada para dispositivos móviles.
Teniendo en cuenta las descargas de CSS en todos los dibujos adicionales en el modelo de objetos de documento (DOM), hay una mayor utilización de la aceleración de hardware y un efecto suave sin sobrecargar la CPU.
Método de posición absoluta
Este método se utiliza con frecuencia para crear un efecto de paralaje, ya que es relativamente ligero en comparación con otras opciones disponibles. La posición de la imagen de fondo se mantiene fija en relación con otro contenido en la pantalla. En el ejemplo que se analiza a continuación, verá cómo hacerlo utilizando la magia de CSS.
En esta sección, veremos dos métodos para el método de posición absoluta:
- Fondo único
- Fondo múltiple
Método de fondo único
En este método, crearemos dos archivos en la misma carpeta. Observe los pasos que se indican a continuación para el mismo propósito:
Step 1
Tenemos que crear dos archivos en la misma carpeta: el primer archivo con marcado HTML y el segundo con código CSS.
Step 2
Ahora, definamos nuestro marcado HTML. Observe el código que se proporciona a continuación:
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "BgContainer">
<div class = "Parallax">
<h1> Welcome! </h1>
</div>
<div class = "FgContainer">
<div class = "MainContent">
<p>
Here we will go ahead with some content which will really vary
according to the content on your site. I am just typing out this
content as it is sometimes good to engage user than the usual lorem
ipsum text!
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>Step 3
Abra el bloc de notas. Copie y pegue el fragmento de código anterior.
Cuando guarde el archivo, en Save as type, Seleccione All Files. Ingrese un nombre para su archivo según sea necesario, pero debe ir seguido de una extensión:.html como se muestra en la captura de pantalla a continuación.
Step 4
Una vez guardado el archivo, cree otro archivo en el bloc de notas y pegue el código que se indica a continuación:
html, body {
font-size: 18px;
line-height: 28px;
}
h1 {
letter-spacing: -15px;
color: white;
text-align: center;
font-size: 200px;
font-weight: 800;
line-height: 200px;
}
BgContainer {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
FgContainer {
position: relative;
display: block;
background-color: white;
z-index: 1;
}
MainContent {
max-width: 750px;
margin: 0 auto;
padding: 75px 0;
}
p {
margin: 75px 0;
}
.Parallax {
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);
background-color: rgb(250,228, 216);
}Como ha visto en el último paso, cuando está guardando el archivo, en Save as escriba, seleccione All Files. Ingrese un nombre a su archivo según sea necesario y agregue una extensión.css lo.
Análisis de código
Entendamos qué parte del código es responsable del efecto de paralaje. El trabajo más importante para el paralaje se realiza mediante el uso de perspectiva y reglas de transformación. Referirse aline 15en el fragmento de código anterior. La perspectiva se crea para nuestroBgContainerprimero. Esto inicia una plataforma para la regla de transformación.
En el Parallax contenedor a partir de la línea 40, transform La regla en la línea 48 empuja el div BgContainer al fondo usando translate (-1px).
Puede modificar los valores de los parámetros de conversión y escala para modificar la profundidad del paralaje.
Cuando abra el archivo html, el efecto de paralaje será visible como se muestra a continuación:
Note - Para el resto del tutorial, se asumirá que el lector puede crear los archivos HTML y CSS según la estructura de carpetas proporcionada en el método anterior.
Método de fondo múltiple
En este método, tendremos diferentes imágenes a medida que el usuario se desplaza hacia abajo en la página. Hay una imagen con lápices, que se utiliza en diferentes combinaciones de colores para ilustrar este efecto.
Observe el siguiente código para la página HTML como se muestra a continuación:
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1>Multiple Background Example</h1>
<div class = "parallax">
<div class = "bg__First">First</div>
<div class = "bg__Second">Second</div>
<div class = "bg__Third">Third</div>
<div class = "bg__Fourth">Fourth</div>
</div>
</body>
</html>Al igual que en el ejemplo anterior, usaremos styles.cssalmacenado en la misma ubicación que este archivo HTML. Tenemos tres div diferentes nombrados como Primero, Segundo, Tercero y Cuarto.
El código CSS para el desplazamiento de paralaje se proporciona a continuación:
body, html {
height : 100%;
font-family : sans-serif;
}
.parallax [class*="bg__"] {
position : relative;
height : 50vh;
text-indent : -9999px;
background-attachment : fixed;
background-position : top center;
background-size : cover;
}
.parallax [class*="bg__"]:nth-child( 2n) {
box-shadow : inset 0 0 1em #111;
}
.parallax .bg__First, .bg__Fourth {
height : 100vh;
}
.parallax .bg__First {
background-image : url("parallax0.png");
}
.parallax .bg__Second {
background-image : url("parallax1.png");
}
.parallax .bg__Third {
background-image : url("parallax2.png");
}
.parallax .bg__Fourth {
background-image : url("parallax1.png");
}Aquí, creamos el efecto de paralaje de la línea 7, la propiedad importante aquí es background-attachment:fixed.
Usando esta propiedad, la primera imagen con lápices de colores permanecerá siempre en la parte superior. A medida que se desplaza hacia abajo, comenzarán a aparecer diferentes imágenes como se describe en la línea 28.
Como resultado, podrá ver el efecto de paralaje como se muestra en el gif a continuación. La siguiente imagen es la captura de pantalla del ejemplo que consideramos para varios antecedentes.
Parallax de CSS puro
Combinemos el conocimiento de los dos métodos anteriores y creemos un efecto avanzado de Parallaje de CSS puro.
La diferencia será la forma en que organicemos el image elemento y el z-transformpropiedad. La explicación de la propiedad se proporcionará después del código CSS.
Cree el archivo HTML con el siguiente código utilizando el método habitual del Bloc de notas.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "wrapParallax">
<div class = "parallax_one">
<img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">
</div>
<div class = "parallax_two">
<h1>Pure CSS Parllax Advanced Level</h1>
</div>
<div class = "parallax_three">
<img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">
</div>
</div>
</body>
</html>Para el archivo CSS, el código se proporciona a continuación:
body, html {
padding: 0;
margin: 0;
}
h1 {
color: blue;
text-align: center;
padding: 20px;
text-shadow: 0px 0px 10px #fffff;
}
img {
width:100vw;
height:100vh;
}
.wrapParallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.parallax_one {
transform: translateZ(-100px) scale(2)
}
.parallax_two {
z-index: 10;
transform: translateZ(-200px) scale(3)
}
.parallax_three {
margin-top: 100vh;
}Análisis de código
Hemos fijado la posición de la primera capa en line 26 mediante el uso position:absolutepropiedad. Las posiciones también están codificadas en 0.
En parallax_two, que es la capa con encabezado, hemos aplicado z-index: 10para proporcionar un efecto flotante al título. La capaparallax_three se mueve a la parte inferior proporcionando una propiedad margin-top.
Así, podemos elevar el nivel de complejidad en nuestro efecto Parallax.
Observe el efecto como se muestra en la siguiente figura.
