|author||James Bottomley <JBottomley@Parallels.com>||Sat Mar 01 15:44:46 2014 -0800|
|committer||James Bottomley <JBottomley@Parallels.com>||Mon Mar 03 07:56:04 2014 -0800|
impress.js: add build transitions The idea of this new element is that some scenes are built up while you explain them on the podium. For instace, you can take a diagram and add and remove arrow pointers to interesting bit. The way this is done is to use a build class. Now every step is either a step or a build. a build keeps all the prior elements up to the step active (so there's no transition and they're still at full opacity). The way this works is simple, the goto() function now maintains a list of elements building from the last executed step. When it moves to a new step, these are all made inactive together. For goto() which is not a linear move from the previous, all the active builds are torn down and the new prior step located and all builds executed to the new point. Signed-off-by: James Bottomley <JBottomley@Parallels.com>
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.
impress.js may not help you if you have nothing interesting to say ;)
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.
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.
More examples and demos can be found on Examples and demos wiki page.
Feel free to add your own example presentations (or websites) there.
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.
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 :)
impress.js name in courtesy of @skuzniak.
It's an (un)fortunate coincidence that a Open/LibreOffice presentation tool is called Impress ;)
Version 0.5 introduced events including
impress:stepenter, but this event was not triggered properly in some specific transition types (for example when only scale was changing between steps). It was caused by the fact that in such cases expected
transitionend event was not triggered.
This version fixes this issue. Unfortunately modern
transitionend event is no longer used to detect when the transition has finished, but old school (and more reliable)
setTimeout is used.
More descriptive comments added to demo CSS and impress.js source file, so now not only
index.html is worth reading ;)
Changes in version 0.5 introduced a bug (#126) that was preventing clicks on links (or any clickable elements) on currently active step. This release fixes this issue.
impress()function no longer automatically initialize presentation; new method called
initwas added to API and it should be used to start the presentation
impress:initis triggered on root presentation element (
#impressby default) when presentation is initialized
impress-disabledis added to body element by the impress.js script and it's changed to
init()function is called
impress:stepleaveevents are triggered on step elements and can be handled like any other DOM events (with
futureclasses are added to step elements
futureclass appears on steps that were not yet visited
presentclass appears on currently visible step - it's different from
presentclass is added when transition finishes (step is entered)
pastclass is added to already visited steps (when the step is left)
goto()API method is back! it seems that
gotowas a future reserved word but isn't anymore, so we can use this short and pretty name instead of camelCassy
stepTo- and yes, that means API changed again...
goto()method now supports new types of parameters:
impress().goto( document.getElementById("overview") )
goto()also accepts second parameter to define the transition duration in ms, for example
In current version calling
impress() doesn't automatically initialize the presentation. You need to call
init() function from the API. So in a place were you called
impress() to initialize impress.js simply change this call to
Version 0.4 changed
goto API method into
stepTo. It turned out that
So if you have been using version 0.4 and have any reference to
stepTo API method make sure to change it to
It also adds a flag
data-perspective(in px, defaults so 1000),
data-transition-duration(in ms, defaults to 1000)
data-width(in px, defaults to 1024),
data-height(in px, defaults to 768),
max-scale(defaults to 1),
min-scale(defaults to 0)
gotoAPI function was renamed to
impress-not-supportedclass is now set on
bodyelement instead of
#impresselement and it's replaced with
impress-supportedwhen browser supports all required features
step-IDused to indicate progress of the presentation are now renamed to
impress-on-IDand are set on
bodyelement, so please make sure to update your code
goto() function from impress.js API make sure to change it to
If in your CSS you were using classes based on currently active step with
step- prefix, such as
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)
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
See the source of
index.html for example and more details.
Contains basic functionality for step placement and transitions between them with simple fallback for non-supporting browsers.
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
dataset APIs. If they are not available in the browser, impress.js will not work.
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.
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
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 (version 2 or later) Licenses.