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 give1
. 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
- Support for Videos is broken (will display black):