Enfriar la biblioteca JavaScript de diapositivas con efectos basados en WebGL-GLSlideshow. js

Vista prévia

Descripción

GLSlideshow. js es una biblioteca de JavaScript independiente que se utiliza para renderizar una presentación fresca con varios WebGL y efectos de transición basados en lienzo.

¿Cómo funciona?

Cree un elemento canvas de HTML5 para colocar la proyección de diapositivas.

<canvas id="slideshow-container"></canvas>

Descargue y coloque la biblioteca de JavaScript GLSlideshow. js en la parte inferior de la Página Web.

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

Cree una nueva instancia de proyección de diapositivas a partir de una matriz de imágenes.

const instance = new GLSlideshow(



['1.jpg', '2.jpg', '3.jpg'],



{




canvas: document.getElementById( 'slideshow-container' )




// more options here



}
);

Available slideshow options.

// width and height of the slideshow
width: 1024,
height: 576,

 // duration time in ms
duration: 1000,

// interval time in ms
interval: 5000,

 // aspect ratio
imageAspect: null,

// 'crossFade'
// 'crossZoom'
// 'directionalWipe'
// 'wind'
// 'ripple'
// 'pageCurl'
effect: 'crossZoom'

API methods.

instance.pause()
instance.play()
instance.setSize(width, height)
instance.insert(image, order)
instance.remove(order)
instance.replace(images)
instance.transition(to)
instance.setEffect(effectName [, uniforms ])
instance.destory()

Event listeners.

instance.addEventListener( 'transitionStart', function () {

 // transition start
});

instance.addEventListener( 'transitionEnd', function () {

 // transition end
});

Registro de cambios

03/27/2019

• v2