Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 160 lines (92 sloc) 6.454 kb
f7985a9 @steveklabnik zomg basic impress.js
authored
1 impress.js
2 ============
3
4 It's a presentation framework based on the power of CSS3 transforms and
5 transitions in modern browsers and inspired by the idea behind prezi.com.
6
7 **WARNING**
8
9 impress.js may not help you if you have nothing interesting to say ;)
10
11
12 ABOUT THE NAME
13 ----------------
14
15 impress.js name in [courtesy of @skuzniak](http://twitter.com/skuzniak/status/143627215165333504).
16
17 It's an (un)fortunate coincidence that a Open/LibreOffice presentation tool is called Impress ;)
18
19
20 VERSION HISTORY
21 -----------------
22
23 ### 0.2 ([browse](http://github.com/bartaz/impress.js/tree/0.2), [zip](http://github.com/bartaz/impress.js/zipball/0.2), [tar](http://github.com/bartaz/impress.js/tarball/0.2))
24
25 * tutorial/documentation added to `index.html` source file
26 * being even more strict with strict mode
27 * code clean-up
28 * couple of small bug-fixes
29
30
31 ### 0.1 ([browse](http://github.com/bartaz/impress.js/tree/0.1), [zip](http://github.com/bartaz/impress.js/zipball/0.1), [tar](http://github.com/bartaz/impress.js/tarball/0.1))
32
33 First release.
34
35 Contains basic functionality for step placement and transitions between them
36 with simple fallback for non-supporting browsers.
37
38
39
40 HOW TO USE IT
41 ---------------
42
43 [Use the source](http://github.com/bartaz/impress.js/blob/master/index.html), Luke ;)
44
45 If you have no idea what I mean by that, or you just clicked that link above and got
46 very confused by all these strange characters that got displayed on your screen,
47 it's a sign, that impress.js is not for you.
48
49 Sorry.
50
51 Fortunately there are some guys on GitHub that got quite excited with the idea of building
52 editing tool for impress.js. Let's hope they will manage to do it.
53
54
55 EXAMPLES AND DEMOS
56 --------------------
57
58 ### Official demo
59
60 [impress.js demo](http://bartaz.github.com/impress.js) by [@bartaz](http://twitter.com/bartaz)
61
62 ### Presentations
63
64 [CSS 3D transforms](http://bartaz.github.com/meetjs/css3d-summit) from [meet.js summit](http://summit.meetjs.pl) by [@bartaz](http://twitter.com/bartaz)
65
66 [What the Heck is Responsive Web Design](http://johnpolacek.github.com/WhatTheHeckIsResponsiveWebDesign-impressjs/) by John Polacek [@johnpolacek](http://twitter.com/johnpolacek)
67
68 [12412.org presentation to Digibury](http://extra.12412.org/digibury/) by Stephen Fulljames [@fulljames](http://twitter.com/fulljames)
69
70 [Data center virtualization with Wakame-VDC](http://wakame.jp/wiki/materials/20120114_TLUG/) by Andreas Kieckens [@Metallion98](https://twitter.com/#!/Metallion98)
71
72 [Asynchronous JavaScript](http://www.medikoo.com/asynchronous-javascript/3d/) by Mariusz Nowak [@medikoo](http://twitter.com/medikoo)
73
74 [Introduction to Responsive Design](http://www.alecrust.com/factory/rd-presentation/) by Alec Rust [@alecrust] (http://twitter.com/alecrust)
75
76 ### Websites and portfolios
77
78 [lioshi.com](http://lioshi.com) by @lioshi
79
80 [alingham.com](http://www.alingham.com) by Al Ingham [@alingham](http://twitter.com/alingham)
81
82 [nice-shots.de](http://nice-shots.de) by [@NiceShots](http://twitter.com/NiceShots)
83
84 [museum140](http://www.youtube.com/watch?v=ObLiikJEt94) Shorty Award promo video [entirely made with ImpressJS](http://thingsinjars.com/post/446/museum140-shorty/) by [@thingsinjars](http://twitter.com/thingsinjars)
85
86
87 If you have used impress.js in your presentation (or website) and would like to have it listed here,
88 please contact me via GitHub or send me a pull request to updated `README.md` file.
89
90
91
92 BROWSER SUPPORT
93 -----------------
94
95 ### TL;DR;
96
97 Currently impress.js works fine in latest Chrome/Chromium browser, Safari 5.1 and Firefox 10
98 (to be released in January 2012). IE is currently not supported (IE10 is close, but not there
99 yet - see below for details). It also doesn't work in Opera.
100
101 As it was not developed with mobile browsers in mind, it currently doesn't work on
102 any mobile devices, including tablets.
103
104 ### Still interested? Read more...
105
106 Additionally for the animations to run smoothly it's required to have hardware
107 acceleration support in your browser. This depends on the browser, your operating
108 system and even kind of graphic hardware you have in your machine.
109
110 For browsers not supporting CSS3 3D transforms impress.js adds `impress-not-supported`
111 class on `#impress` element, so fallback styles can be applied to make all the content accessible.
112
113
114 ### Even more explanation and technical stuff
115
116 Let's put this straight -- wide browser support was (and is) not on top of my priority list for
117 impress.js. It's built on top of fresh technologies that just start to appear in the browsers
118 and I'd like to rather look forward and develop for the future than being slowed down by the past.
119
120 But it's not "hard-coded" for any particular browser or engine. If any browser in future will
121 support features required to run impress.js, it will just begin to work there without changes in
122 the code.
123
124 From technical point of view all the positioning of presentation elements in 3D requires CSS 3D
125 transforms support. Transitions between presentation steps are based on CSS transitions.
126 So these two features are required by impress.js to display presentation correctly.
127
128 Unfortunately the support for CSS 3D transforms and transitions is not enough for animations to
129 run smoothly. If the browser doesn't support hardware acceleration or the graphic card is not
130 good enough the transitions will be laggy.
131
132 Additionally the code of impress.js relies on APIs proposed in HTML5 specification, including
133 `classList` and `dataset` APIs. If they are not available in the browser, impress.js will not work.
134
135 Fortunately, as these are JavaScript APIs there are polyfill libraries that patch older browsers
136 with these APIs.
137
138 For example IE10 is said to support CSS 3D transforms and transitions, but it doesn't have `classList`
139 not `dataset` APIs implemented at the moment. So including polyfill libraries *should* help IE10
140 with running impress.js.
141
142
143 ### And few more details about mobile support
144
145 Mobile browsers are currently not supported. Even iOS and Android browsers that support
146 CSS 3D transforms are forced into fallback view at this point.
147
148 Anyway, I'm really curious to see how modern mobile devices such as iPhone or iPad can
149 handle such animations, so future mobile support is considered.
150
151 iOS supports `classList` and `dataset` APIs starting with version 5, so iOS 4.X and older is not
152 likely to be supported (without polyfill code).
153
154
155 LICENSE
156 ---------
157
158 Copyright 2011-2012 Bartek Szopka. Released under MIT License.
159
Something went wrong with that request. Please try again.