Plugin de JavaScript para imágenes de fondo suaves y sensibles-backwall

Vista prévia

Descripción

Backwall es una biblioteca de JavaScript pura para solución de imagen adaptable que se ocupa de la anchura de la pantalla y cargas en la imagen de fondo correcta para reducir el tráfico de red y aumentar la velocidad de carga de página.

Características

• Detecte el soporte del navegador para background-Size: cubra utilizando Modernizr y proporcione un respaldo adecuado, por ejemplo, un fondo de color sólido
• Detecte el tamaño de la pantalla del usuario y la proporción de píxeles, y sirva una imagen de fondo de media o alta resolución
• Para los usuarios con conexiones lentas, sirva una imagen de fondo de baja resolución mientras la imagen de mayor resolución se carga
• Difumine suavemente las imágenes de fondo cuando esté completamente cargada usando transiciones CSS3 cuando el navegador las admita

¿Cómo funciona?

Cargue el Modernizr. js y el backwall. js necesarios en el documento HTML.

<script src="modernizr-custom.js"></script>
<script src="backwall.standalone.min.js"></script>

Agregue una imagen de fondo al contenedor que actuará como fondo de reserva.

.container {

background-image: url(bg.jpg);

background-color: black;
}

Inicialice el backwall y especifique las rutas de la imagen para diferentes resoluciones de pantalla.

new Backwall({


imgLoRes: "bg-small.jpg",


 imgMidRes: "bg-medium.jpg",


imgHiRes: "bg-full.jpg"
});

Más opciones de configuración.

// The cutoff point at which backwall decides to load imgMidRes or imgHiRes
hiResThreshPx: 1080,

// The cross-fade transition time from 0% to 100% opacity when each image loads.
 // Will effectively be 0 on browsers that do not support CSS3 transitions.
fadeTimeSecs: 0.5