diaporama

 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
------------

http://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): drawing in Android Chrome is broken: https://code.google.com/p/chromium/issues/detail?id=174642