Git Product home page Git Product logo

impress.js's Introduction

impress.js

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

WARNING

impress.js may not help you if you have nothing interesting to say ;)

HOW TO USE IT

Use the source, Luke ;)

Please note that impress.js was created for developers. Some basic knowledge of html, css and javascript is a prerequisite to install and use its features.

If you are a designer or novice developer that want to use impress.js, there are some projects that aim to provide an editing tool for impress.js. They might be still in development, but we hope they will manage to make impress.js more accessible to everyone.

EXAMPLES AND OTHER LEARNING RESOURCES

Official demo

impress.js demo by @bartaz

Examples and demos

More examples and demos can be found on Examples and demos wiki page.

Feel free to add your own example presentations (or websites) there.

Other tutorials and learning resources

If you want to learn even more there is a list of tutorials and other learning resources on the wiki, too.

There is also a book available about Building impressive presentations with impress.js by Rakhitha Nimesh Ratnayake.

WANT TO CONTRIBUTE?

Please, read the contributing guidelines on how to create Issues and Pull Requests.

Note: The team has changed, so there will be many changes in the upcoming versions. If you need informations about versions, check the changelog.

ABOUT THE NAME

impress.js name in courtesy of @skuzniak.

It's an (un)fortunate coincidence that a Open/LibreOffice presentation tool is called Impress ;)

BROWSER SUPPORT

TL;DR;

Currently impress.js works fine in latest Chrome/Chromium browser, Safari 5.1 and Firefox 10. With addition of some HTML5 polyfills (see below for details) it should work in Internet Explorer 10, 11 and Edge. It doesn't work in Opera, as it doesn't support CSS 3D transforms.

If you find impress.js working on other browsers, feel free to tell us and we'll update this documentation.

As a presentation tool it was not developed with mobile browsers in mind, but some tablets are good enough to run it, so it should work quite well on iPad (iOS 5, or iOS 4 with HTML5 polyfills) and Blackberry Playbook. Inform us of any bug and we will try to fix this.

Still interested? Read more...

Additionally for the animations to run smoothly it's required to have hardware acceleration support in your browser. This depends on the browser, your operating system and even kind of graphic hardware you have in your machine.

For browsers not supporting CSS3 3D transforms impress.js adds impress-not-supported class on #impress element, so fallback styles can be applied to make all the content accessible.

Even more explanation and technical stuff

Let's put this straight -- wide browser support was (and is) not on top of my priority list for impress.js. It's built on top of fresh technologies that just start to appear in the browsers and I'd like to rather look forward and develop for the future than being slowed down by the past.

But it's not "hard-coded" for any particular browser or engine. If any browser in future will support features required to run impress.js, it will just begin to work there without changes in the code.

From technical point of view all the positioning of presentation elements in 3D requires CSS 3D transforms support. Transitions between presentation steps are based on CSS transitions. So these two features are required by impress.js to display presentation correctly.

Unfortunately the support for CSS 3D transforms and transitions is not enough for animations to run smoothly. If the browser doesn't support hardware acceleration or the graphic card is not good enough the transitions will be laggy.

Additionally the code of impress.js relies on APIs proposed in HTML5 specification, including classList and dataset APIs. If they are not available in the browser, impress.js will not work.

Fortunately, as these are JavaScript APIs there are polyfill libraries that patch older browsers with these APIs.

For example IE10 is said to support CSS 3D transforms and transitions, but it doesn't have dataset APIs implemented at the moment. So including polyfill libraries should help IE10 with running impress.js.

And few more details about mobile support

Mobile browsers are currently not supported. Even Android browsers that support CSS 3D transforms are forced into fallback view at this point.

Fortunately some tablets seem to have good enough hardware support and browsers to handle it. Currently impress.js presentations should work on iPad and Blackberry Playbook.

In theory iPhone should also be able to run it (as it runs the same software as iPad), but I haven't found a good way to handle its small screen.

Also note that iOS supports classList and dataset APIs starting with version 5, so iOS 4.X and older requires polyfills to work.

Copyright 2011-2016 Bartek Szopka - Released under the MIT License

impress.js's People

Contributors

bartaz avatar fagnermartinsbrack avatar pierstoval avatar medikoo avatar allolex avatar exequiel09 avatar mortonfox avatar nhodges avatar alecrust avatar alexjeng avatar ateich avatar anjalyes avatar bijanbwb avatar sukima avatar dronrathore avatar gphmorin avatar haacked avatar henrikingo avatar jasondavies avatar jenil avatar kkirsche avatar shama avatar opengrid avatar mattlockyer avatar mattdbr avatar mattmakai avatar powerkiki avatar svisser avatar thingsinjars avatar fulljames avatar

Watchers

Dreamer avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.