Skip to content
This repository has been archived by the owner on Dec 29, 2020. It is now read-only.

Latest commit

 

History

History
53 lines (39 loc) · 3.23 KB

README.md

File metadata and controls

53 lines (39 loc) · 3.23 KB
Raw

Diaporama

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

-> DEMO <-

Related Projects

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