in

Cómo crear un efecto de desplazamiento de paralaje


Aprenda a crear un efecto de desplazamiento de «paralaje» con CSS.


Paralaje

El desplazamiento de paralaje es una tendencia del sitio web donde el contenido de fondo (es decir, una imagen) se mueve a una velocidad diferente que el contenido de primer plano mientras se desplaza. Haga clic en los enlaces a continuación para ver la diferencia entre un sitio web con y sin desplazamiento de paralaje.

Demostración con desplazamiento de paralaje

Demostración sin desplazamiento de paralaje

Nota: El desplazamiento de Parallax no siempre funciona en dispositivos móviles / teléfonos inteligentes. Sin embargo, puede utilizar consultas de medios para desactivar el efecto en dispositivos móviles (consulte el último ejemplo en esta página).


Cómo crear un efecto de desplazamiento de paralaje

Utilice un elemento contenedor y agregue una imagen de fondo al contenedor con una altura específica. Entonces usa el background-attachment: fixed para crear el efecto de paralaje real. Las otras propiedades de fondo se utilizan para centrar y escalar la imagen perfectamente:

Ejemplo con píxeles


.parallax {
/ * La imagen utilizada * /
imagen de fondo: url («img_parallax.jpg»);

/ * Establecer una altura específica * /
altura mínima: 500px;

/ * Crea el efecto de desplazamiento de paralaje * /

archivo adjunto de fondo: fijo;
posición de fondo: centro;
repetición de fondo: no repetición;
tamaño de fondo: cubierta;
}

Inténtalo tú mismo »

El ejemplo anterior usó píxeles para establecer la altura de la imagen. Si desea utilizar un porcentaje, por ejemplo, 100%, para que la imagen se ajuste a toda la pantalla, establezca la altura del contenedor de paralaje en 100%. Nota: También debes aplicar height: 100% a y :

Ejemplo con porcentaje

cuerpo, html {
altura: 100%;
}

.parallax {

/ * La imagen utilizada * /
imagen de fondo: url («img_parallax.jpg»);

/* Altura completa */

altura: 100%;

/ * Crea el efecto de desplazamiento de paralaje * /
archivo adjunto de fondo: fijo;

posición de fondo: centro;
repetición de fondo: no repetición;
tamaño de fondo: cubierta;
}

Inténtalo tú mismo »

Algunos dispositivos móviles tienen problemas con background-attachment: fixed. Sin embargo, puede utilizar consultas de medios para desactivar el efecto de paralaje para dispositivos móviles:

Ejemplo

/ * Desactivar el desplazamiento de paralaje para todas las tabletas y teléfonos. Aumente / disminuya los píxeles si es necesario * /
@media solo pantalla y (max-device-width: 1366px) {
.parallax {

adjunto de fondo: desplazamiento;
}
}

Inténtalo tú mismo »

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

rc04v2x1 arizonafederal

Arizona Federal Credit Union crece con oracleCloud

Primavera vs Spring Boot vs Spring MVC