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

License

MungeParty/diaporama

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages