Fork me on GitHub

Diaporama

slideshow engine that provides high quality animation effects performed in WebGL including Kenburns Effect, GLSL.io Transitions, Bezier Easing, Slide2d,... and powered by stack.gl stack. Open Source and free to use.

use Diaporama Maker to easily generate slideshows... or write your own diaporama.json.

use Diaporama library to run the slideshow.

Last transition was: ...
Current slide:
How does it work??

The Slideshow is fully described by this JSON:

and executed on this page by this snippet:


var Diaporama = require("diaporama");
var GlslTransitions = require("glsl-transitions");
var data = require("./diaporama.json");
data.transitions = GlslTransitions;
var diaporama = Diaporama(document.getElementById("diaporama"), data, {
  autoplay: true,
  loop: true
});
function resize () {
  // Responsive diaporama
  var width = Math.min(800, document.body.clientWidth);
  var height = Math.round(0.75 * width);
  diaporama.width = width;
  diaporama.height = height;
}
window.addEventListener("resize", resize);
resize();
window.diaporama = diaporama; // Play with diaporama in the Web Console
      

Diaporama, JavaScript library to perform slideshow on the web

Repository - Gitbook

Key features

Diaporama Maker, WYSIWYG for Diaporama

Repository - Gitbook - live demo

diaporama.glsl.io

transitions.GLSL.io, open collection of transitions

Web Application - Repository

History

Last year, I've created transitions.GLSL.io, an universal collection of transitions. This came from the frustration that every software is implementing its own transitions, whereas we could just share a common open collection. GLSL is widely supported (WebGL, OpenGL), therefore we can now provide implementations for CLIs (ffmpeg,...) and Movie Maker softwares (iMovie, ...).
On transitions.GLSL.io, transitions are created by people (via creating Gists).

Diaporama provides a web use case for this GLSL Transitions idea. I've then started Diaporama Maker by experimenting with React and ends working on a complete Slideshow Editor.

Call For Contributors

There is in my mind a long way to go to finish the journey I've started but the path is pretty clear. However I think alone will be tough to do everything! Here is a few ideas:

Thank you!

You can help me making Diaporama and GLSL Transitions an open solution that we could use for web and beyond. I'm looking forward to your contributions :)

Source code of this website.