Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions.

-> DEMO <-

Diaporama Key features

  • Minimal and unopinionated library. Diaporama focuses on rendering the slideshow. Up to you to hook it to any event (window resize, touch events, keyboard,...) based on your needs.
  • Responsive: Diaporama works with any resolution and any ratio. The original image ratios are always preserved (crop to fit).
  • Simple API. the Diaporama API mimic the HTML5 Video API for a better learning curve. You can set some Properties and the library will always be in sync with your changes (and update efficiently with the minimal changes). There is also Events.
  • Easily interoperable with Virtual DOM library.
  • Videos support. allowing to define multiple video formats and image fallback.
  • Kenburns effect on images with configurable animation from/to and easing function.
  • Customizable transition effects using GLSL Transitions created on GLSL.io (or your own)
  • Works everywhere. Diaporama is implemented with WebGL (hardware accelerated) but also have DOM fallback.
  • The slideshow is described in a JSON format.
  • Retina-ready. By default, the library use devicePixelRatio as canvas resolution. N.B.: This has a cost in term of performance, so if you want you can just give 1. You can also responsively adapt it based on the canvas area.
  • Texts, Images and Shapes support – using slide2d which exposes everything Canvas can do.

Gitbooks Full Documentation


Current state of browser support

Diaporama should be widely supported by browsers (desktop and mobile). If WebGL is not supported by the browser/hardware, it fallbacks properly to DOM implementation (an opacity transition is used).

Here are the current browsers I've been testing on

results matching ""

    No results matching ""