Crear fondos de movimiento automático en JavaScript puro-slizer. js

Tiempo de ejecución: 30 minutos. Empezar

Autor: mahmoudJordan
Views Total: 109
Sitio oficial: Ir a la web
Actualizado: April 12, 2019
Licencia: MIT

Vista prévia

Crear fondos de movimiento automático en JavaScript puro-slizer. js

Descripción

slizer. js es un plugin de JavaScript ligero para desplazar automáticamente la imagen de fondo de un contenedor al igual que un carrusel. Ideal para fondos panorámicos.

Funcionamiento

Cargue el script slizer. js en el documento.

<script src="Slizer.js"></script>

Agregue una imagen de fondo al contenedor.

<div id="example"></div>
#example {

background-image:
url("panorama.jpg");
}

Conecte el Slizer a la imagen de fondo. Hecho.

const object = document.getElementById("example");
const slized = new Slizer(object);

Establezca la dirección de desplazamiento. Predeterminado: ' h ' (horizontal).

const slized = new Slizer(object, {



Direction : 'v'
});

Ajuste la velocidad de desplazamiento.

const slized = new Slizer(object, {



RoundInterval : 100,



PixelPerRound : 1
});

Decida si desea utilizar o no los estilos de fondo predeterminados. Valor predeterminado: false.

  • backgroundRepeat: reapeat
  • backgroundAttachment: fijo
  • backgroundPosition: 0 0
const slized = new Slizer(object, {



ApplyDefaultStyle : true
});

Te puede interesar: