Diaporama

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

-> DEMO <-

Related Projects

• diaporama-maker: application to create Diaporama slideshows.
• diaporama-react: Use React with Diaporama.
• kenburns: KenBurns effect for the Web.
• glsl-transition: Perform a GLSL Transition.
• slide2d: Express vectorial content in JSON using canvas2d directives.

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

https://gre.gitbooks.io/diaporama/content/

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

• Firefox (Mac, Linux)
• Chrome (Mac, Chromium Linux, Windows)
• Safari (Mac)
• IE 11
• iOS Safari
• Android Chrome
  • Support for Videos is broken (will display black): <video> drawing in Android Chrome is broken: https://code.google.com/p/chromium/issues/detail?id=174642