diaporama v2.2.0
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
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):
<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):
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago
11 years ago
11 years ago