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

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