{"id":13547143,"url":"https://github.com/gre/diaporama","last_synced_at":"2025-12-16T23:33:33.044Z","repository":{"id":1582247,"uuid":"2067993","full_name":"gre/diaporama","owner":"gre","description":"image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.","archived":true,"fork":false,"pushed_at":"2018-02-08T23:16:18.000Z","size":110430,"stargazers_count":799,"open_issues_count":18,"forks_count":104,"subscribers_count":34,"default_branch":"master","last_synced_at":"2024-04-25T20:04:09.673Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://greweb.me/diaporama/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gre.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-07-18T18:45:19.000Z","updated_at":"2024-03-24T02:20:35.000Z","dependencies_parsed_at":"2022-07-18T17:00:29.333Z","dependency_job_id":null,"html_url":"https://github.com/gre/diaporama","commit_stats":null,"previous_names":["gre/slider.js"],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gre%2Fdiaporama","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gre%2Fdiaporama/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gre%2Fdiaporama/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gre%2Fdiaporama/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gre","download_url":"https://codeload.github.com/gre/diaporama/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246880247,"owners_count":20848832,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T12:00:51.564Z","updated_at":"2025-12-16T23:33:27.998Z","avatar_url":"https://github.com/gre.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","🚀 A series of exquisite and compact web page cool effects"],"sub_categories":["Image Effect"],"readme":"![](https://cloud.githubusercontent.com/assets/211411/7667405/7e5c14f0-fc06-11e4-8a96-8b3297728e28.png) Diaporama\n=========\nDiaporama is an image/video/content slideshow engine providing high quality animation effects including [Kenburns](https://github.com/gre/kenburns) effect and [GLSL Transitions](https://github.com/gre/glsl-transition).\n\n[![](https://nodei.co/npm/diaporama.png)](https://www.npmjs.com/package/diaporama)\n\n**[-\u003e DEMO \u003c-](http://greweb.me/diaporama/)**\n\nRelated Projects\n---------------\n\n- **[`diaporama-maker`](https://github.com/gre/diaporama-maker): application to create Diaporama slideshows.**\n- [`diaporama-react`](https://github.com/glslio/diaporama-react): Use React with Diaporama.\n- [`kenburns`](http://github.com/gre/kenburns): KenBurns effect for the Web.\n- [`glsl-transition`](https://github.com/glslio/glsl-transition): Perform a GLSL Transition.\n- [`slide2d`](https://github.com/gre/slide2d): Express vectorial content in JSON using canvas2d directives.\n\n\nDiaporama Key features\n------------\n\n- **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.\n- **Responsive**: *Diaporama* works with any resolution and any ratio. The original image ratios are always preserved (crop to fit).\n- **Simple [API](docs/api.md)**. the Diaporama API mimic the HTML5 Video API for a better learning curve. You can set some [Properties](docs/props.md) and the library will always be in sync with your changes (and update efficiently with the minimal changes). There is also [Events](docs/events.md).\n- [Easily interoperable with Virtual DOM library](docs/vdom.md).\n- **Videos** support. allowing to define multiple video formats and image fallback.\n- **[Kenburns](https://github.com/gre/kenburns) effect** on images with configurable animation from/to and easing function.\n- Customizable **transition effects** using GLSL Transitions created on [GLSL.io](http://transitions.glsl.io/) (or your own)\n- **Works everywhere**. *Diaporama* is implemented with WebGL (hardware accelerated) but also have DOM fallback.\n- The slideshow is described in a [JSON format](docs/format.md).\n- **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.\n- **Texts, Images and Shapes** support – using [slide2d](https://github.com/gre/slide2d) which exposes everything Canvas can do.\n\nGitbooks Full Documentation\n------------\n\n[**https://gre.gitbooks.io/diaporama/content/**](https://gre.gitbooks.io/diaporama/content/)\n\n\nCurrent state of browser support\n-----------\n\nDiaporama 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).\n\nHere are the current browsers I've been testing on\n\n- Firefox (Mac, Linux)\n- Chrome (Mac, Chromium Linux, Windows)\n- Safari (Mac)\n- IE 11\n- iOS Safari\n- Android Chrome\n  - Support for Videos is broken (will display black): `\u003cvideo\u003e` drawing in Android Chrome is broken: https://code.google.com/p/chromium/issues/detail?id=174642\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgre%2Fdiaporama","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgre%2Fdiaporama","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgre%2Fdiaporama/lists"}