Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil - bueno, este motor reaccionará al movimiento de un dispositivo inteligente, desplazando las capas dependiendo de su profundidad dentro de una escena.
Las primeras impresiones son muy importantes, especialmente cuando se quiere obtener una nueva audiencia.
Y cada vez es más importante tener una página de bienvenida sorprendente para hacer ese efecto "wow" al visitante, para que se enganche. Además, con Parallax.js podemos hacer uso del giroscopio en los dispositivos móviles para mostrar el movimiento al instante. Así es, reaccionará a la orientación de un teléfono móvil y a las pastillas con el giroscopio.
Vamos a ello.
Primero sobre el efecto
El desplazamiento de Parallax como un efecto de diseño web es más o menos una tendencia o técnica conocida para la simulación de movimiento de fondo. Desde que se introdujeron HTML5 y CSS3, se hizo bastante popular entre los diseñadores web.
El objeto en primer plano, como el contenido del texto de tu sitio, se mueve a una velocidad diferente a la de la imagen de fondo. Así, al desplazarse hacia arriba y abajo creamos la ilusión de la "profundidad" ya que el contenido está en diferentes capas. Esto se llama un método de capas. Las capas que se mueven más rápidamente se perciben como más cercanas a la cámara virtual.
Obsérvese que algunos dispositivos móviles no admiten el desplazamiento de parallax, en cuyo caso se utilizan las consultas de los medios de comunicación para desactivar el efecto, sin embargo.
Si quieres leer más sobre el fenómeno en sí, aquí hay un enlace a wikipedia, centrémonos en el uso práctico del mismo.
¿Qué es Parallax JS?
Hay muchos recursos en línea para los tutoriales de Parallax, en este artículo explicaremos el uso de Parallax.Js.
Es el proyecto de dos caballeros, Matthew Wagerfield y Claudio Guglieri, su motor de paralaje reacciona a la orientación de un dispositivo inteligente.
Cuando no se dispone de un giroscopio o de un hardware de detección de movimiento, como en los navegadores clásicos, se utiliza en su lugar la posición del cursor.
Creamos una página simple, con el propósito de implementar esta característica en ella. En nuestro caso creamos una página web presentando a nuestro buen amigo, un artista local que está haciendo globos hechos a mano. Esto servirá a nuestro propósito, porque podemos usar los globos para nuestra escena.
Codificar paso a paso:
1. Instalación
Añade a .
Esta es la última versión. Fíjate que está minificada. Si te gusta más la versión .zip, tienes que descargarla e incluir el enlace como ves abajo en tu código.
2. Crear elementos HTML
Este es el código CSS para ello. Hemos añadido un gradiente lineal a la imagen de fondo, para hacerla un poco más oscura en el fondo. CSS code: Obsérvese que este framework anula los valores de posicionamiento de nuestros elementos en la pantalla, para tenerlo como queremos, para ello utilizamos !importante parámetro para aumentar la especificidad. ¡Hasta aquí todo bien! Hasta ahora tenemos esto: Ahora hemos preparado algunas fotos más - nubes y globos para nuestra escena. Las URLs para ellas están enlazadas en el CSS, sólo se muestra un elemento, para no abrumar a nadie con demasiado código. Los globos están animados para moverse arriba y abajo un 4% infinitamente, puedes tener por ejemplo para cada elemento su propia animación. Así que, ahora tenemos algo como esto. Sabemos que es un poco difícil ver el movimiento en un artículo fijo, pero puedes visitar la página que construimos para verlo funcionar. También hay una demostración del motor en http://matthew.wagerfield.com/parallax/. Esperamos haber demostrado las posibilidades, ya que seguramente hay ocasiones en las que esta técnica puede ser útil para llenar ese sentimiento artístico que puede necesitar en su sitio web. Si quieres saber más sobre los usos del efecto paralaje en la práctica, escribimos sobre los ejemplos de este artículo:
Necesitamos un elemento contenedor, elegimos
.scene {
position: absolute;
width: 100%;
height: 70%;
top: 20vh;
left: 0;
min-height: 360px;
}
.parallax {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.parallax:after {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 90%);
}
3. Ejecute la instancia JS
Como tenemos nuestro contenido listo, crea la instancia de Parallax.js, proporcionando tu elemento de escena como primer parámetro.
El elemento debe ser el que está directamente "encima" de los elementos que quieres que estén en Parallax.
let ourParallax = document.getElementById('parallax');
let parallaxInstance = new Parallax(ourParallax);
4. Configuración
Primero añadimos nuestra imagen de fondo. Se coloca dentro de la div "parallax". En cuanto a la profundidad de los datos(data-depth), el valor tiene el significado de la 'visión de profundidad', básicamente 0 no es paralaje y 1 es el valor superior, el elemento con data-depth=”1” es el que más se moverá. Este valor debe ser usado para configurar su escena de manera que los objetos en primer plano tengan este valor cerca de 1 y los objetos en segundo plano tengan el valor mínimo.
.parallaxBackground {
position: absolute;
width: 110vw;
height: 75vh;
top: -5% !important;
left: -5% !important;
background: url("../images/BG.jpg") 50% 100% / cover no-repeat;
}
5. Añadiendo más fotos!
, mira el código CSS. Así como la foto de la catedral. Todas las imágenes tienen un fondo transparente, o puedes usar imágenes vectoriales .svg si quieres.
.clouds {
position: absolute;
width: 0;
height: 0;
}
.clouds span {
position: absolute;
display: inline-block;
}
.parallaxCloud1 {
top: -1% !important; /* or in vh vw */
left: -1% !important;
}
.parallaxCloud1 span {
width: 225px;
height: 82px;
background: url("../images/cloud1.png") 0 0 / 100% no-repeat;
}
.balloons {
position: absolute;
display: inline-block;
transform-origin: 50%;
}
.balloons span {
position: absolute;
display: inline-block;
transform-origin: 50%;
}
.anim1 {
animation: float 5s infinite ease-in-out; }
@keyframes float {0% {transform: translateY(0%); }
50% {transform: translateY(4%); }
100% {transform: translateY(0%); } }
.parallaxBalloon1 {
top: 8% !important;
left: 12% !important;
}
.parallaxBalloon1 span {
width: 94px;
height: 140px;
background: url("../images/balloonLove.png") 0 0 / 100% no-repeat;
}
WOW. Radical
Conclusión
Esto concluye el artículo, hay muchas opciones de cómo usar el efecto de parallax para hacer que su sitio web parezca mucho más interesante para el usuario o sólo para un visitante al azar.
https://www.ma-no.org/en/programming/javascript/16-fantastic-examples-and-uses-of-the-parallax-effectRelated Articles
