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 ;)
impress.js name in courtesy of @skuzniak.
It's an (un)fortunate coincidence that a Open/LibreOffice presentation tool is called Impress ;)
Changes is version 0.4 introduced a bug causing JavaScript errors being thrown all over the place in fallback mode. This release fixes this issue.
It also adds a flag impress.supported
that can be used in JavaScript to check if impress.js is supported in the browser.
- configuration options on
#impress
element:data-perspective
(in px, defaults so 1000),data-transition-duration
(in ms, defaults to 1000) - automatic scaling to fit window size, with configuration options:
data-width
(in px, defaults to 1024),data-height
(in px, defaults to 768),max-scale
(defaults to 1),min-scale
(defaults to 0) goto
API function was renamed tostepTo
becausegoto
is a future reserved work in JavaScript, so please make sure to update your code- fallback
impress-not-supported
class is now set onbody
element instead of#impress
element and it's replaced withimpress-supported
when browser supports all required features - classes
step-ID
used to indicate progress of the presentation are now renamed toimpress-on-ID
and are set onbody
element, so please make sure to update your code - basic validation of configuration options
- couple of typos and bugs fixed
- favicon added ;)
If in your custom JavaScript code you were using goto()
function from impress.js API make sure to change it
to stepTo()
.
If in your CSS you were using classes based on currently active step with step-
prefix, such as step-bored
(where bored
is the id of the step element) make sure to change it to impress-on-
prefix
(for example impress-on-bored
). Also in previous versions these classes were assigned to #impress
element
and now they are added to body
element, so if your CSS code depends on this, it also should be updated.
Same happened to impress-not-supported
class name - it was moved from #impress
element to body
, so update
your CSS if it's needed.
Changes and fixes added in this version have broken the experience on Blackberry Playbook with OS in version 1.0. It happened due to a bug in the Playbook browser in this version. Fortunately in version 2.0 of Playbook OS this bug was fixed and impress.js works fine.
So currently impress.js work only on Blackberry Playbook with latest OS. Fortunately, it seems that most of the users [are quite quick with updating their devices] (http://twitter.com/brcewane/status/178230406196379648)
- minor CSS 3D fixes
- basic API to control the presentation flow from JavaScript
- touch event support
- basic support for iPad (iOS 5 and iOS 4 with polyfills) and Blackberry Playbook
Because API was introduced the way impress.js script is initialized was changed a bit. You not only has to include
impress.js
script file, but also call impress()
function.
See the source of index.html
for example and more details.
- tutorial/documentation added to
index.html
source file - being even more strict with strict mode
- code clean-up
- couple of small bug-fixes
First release.
Contains basic functionality for step placement and transitions between them with simple fallback for non-supporting browsers.
Use the source, Luke ;)
If you have no idea what I mean by that, or you just clicked that link above and got very confused by all these strange characters that got displayed on your screen, it's a sign, that impress.js is not for you.
Sorry.
Fortunately there are some guys on GitHub that got quite excited with the idea of building editing tool for impress.js. Let's hope they will manage to do it.
CSS 3D transforms from meet.js summit by @bartaz
What the Heck is Responsive Web Design by John Polacek @johnpolacek
12412.org presentation to Digibury by Stephen Fulljames @fulljames
Data center virtualization with Wakame-VDC by Andreas Kieckens @Metallion98
Asynchronous JavaScript by Mariusz Nowak @medikoo
Introduction to Responsive Design by Alec Rust [@alecrust] (http://twitter.com/alecrust)
Bonne année 2012 by Edouard Cunibil @DuaelFr
Careers in Free and Open Source Software by Exequiel Ceasar Navarrete @ichigo1411
HTML5 Future : to infinity and beyond! by Sylvain Weber @sylvainw
lioshi.com by @lioshi
alingham.com by Al Ingham @alingham
museum140 Shorty Award promo video entirely made with ImpressJS by @thingsinjars
electricanimal.co.uk by @elecmal
t3kila.com by Romain Wurtz
If you have used impress.js in your presentation (or website) and would like to have it listed here,
please contact me via GitHub or send me a pull request to updated README.md
file.
If you've found a bug or have a great idea for new feature let me know by [adding your suggestion] (http://github.com/bartaz/impress.js/issues/new) to issues list.
If you have fixed a bug or implemented a feature that you'd like to share, send your pull request against [dev branch] (http://github.com/bartaz/impress.js/tree/dev). But remember that I only accept code that fits my vision of impress.js and my coding standards - so make sure you are open for discussion :)
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 (currently available as Developers Preview). It doesn't work in Opera, as it doesn't support CSS 3D transforms.
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.
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.
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 classList
not dataset
APIs implemented at the moment. So including polyfill libraries should help IE10
with running impress.js.
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 it's 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-2012 Bartek Szopka
Released under the MIT and GPL Licenses.