7 ms·
Impress.js - a Prezi like implementation using CSS3 3D transformations
- breckinloggins 15y ago"WARNING impress.js may not help you if you have nothing interesting to say ;)" Although said in jest, this struck me as poignant. I feel that many of us spend a disturbingly large amount of time researching, downloading and "hello world"ing all of these pretty well-marketed tools, but most of us still haven't figured out what we're going to build with them. Opiate for the hackers. I plead guilty.
- instakill 15y agoGenerally true, but for me this little gem is replacing powerpoint for client pitches.
- yuvadam 15y agoI actually don't see that process as a bad thing. What you're doing is basically learning the tool, and its capabilities. Next time you need a CSS3 transformation plugin tailored for presentations, you'll be able to say "hey, I remember there's this impress thing that I tried once and it's exactly what we need".
- Bootvis 15y agoThe process can be a very bad thing if it does not terminate at some point. Don't forget to use your skills to actually build stuff!
- janus 15y agoVery well implemented. Prezi it's amazing except that it needs flash.
- nerdfiles 15y agowat?
- dwynings 15y agoPrezi, which Impress.js mimics, requires flash. Here's an example: http://prezi.com/ftv9hvziwqi2/coca-cola-company/ http://prezi.com/ftv9hvziwqi2/coca-cola-company/
- dtf 15y agoIt's funny how (to me, at least) the Impress.js deck works, but the Coca-cola one doesn't. Not just a matter of duration, there's something in the animation. Maybe it's the little things like the way the Impress.js animation emphasises the word "tiny" - the transitions add meaning. Whereas the Coca-cola transitions don't seem to say anything extra.
- neilparikh 15y agoHe's saying that Prezi is amazing, but the fact that it requires flash is a negative aspect of it.
- agumonkey 15y agoSeems my poor intel gpu doesn't work well with webgl. I got really narrow z-culling, every 3d flipped text disappear behind a cute intersection triangle, but that's off topic; I didn't know prezzi, and seeing this kind of things live is refreshingly fun.
- hackNightly 15y agoThis is a great implementation and I enjoyed the demo. As I have nothing to say, I won't be using it, but good work.
- moocow01 15y agoLooks fantastic although I have to admit these prezi types of presentations start to give me a headache after about 10 seconds from the motion. Also while the prezis look undeniably cool, I still use the standard slideshows in that I find the transitions to be a little too much whiz-bang fancy where standard slides are minimalist. But this is a very cool demonstration of CSS transforms.
- artursapek 15y agoThis is one of those cool things where you can say, "wow, so we can do this!" But it really doesn't solve any problem or help anyone achieve anything.
- stbullard 15y agoYour comment is self-absorbed, unhelpful, and wrong. I, for one, have long been looking for an easier way to prototype and test 3D interfaces for multidimensional data. It's hard to get meaningful feedback on a movie or a SketchUp model, and this tool may just fit the bill.
- artursapek 15y agoGood luck!
- tptacek 15y agoThis is really slick. I'm torn by Prezi. It's the moral antipode to Tufte's philosophy of presentation. It seems like it should be objectively evil. But the infinite canvas aspect of it makes the slides so dense they actually kind of work for reading online; the transition animations, annoying as they are, add pacing and create a reading experience that somewhat mirrors the delivery of an actual talk. I'd love to hear some success stories from people who have actually delivered Prezi talks in public.
- BrianHV 15y agoI haven't tried Prezi in public. But to me, the big opportunity in this for a well-organized presenter is the ability to spatially orient your audience. I can imagine a history lecturer creating a timeline spanning the entire length of the course, marking major events on it. When he wants to discuss a topic, he zooms in on the timeline so that the students get both context and specificity. I can imagine an elementary music teacher designing a presentation with instruments grouped by family, zooming in first on the woodwinds, then on the single reeds, then on the saxophones. When moving to a new family, it would zoom out first to remind the students of how the instruments relate to each other. I can even imagine any routine three-point presentation could benefit from the added context that spatial reference can provide. Animation for animation's sake would almost certainly be detrimental to a presentation. But I'm excited about tools like this because they give good presenters the opportunity to present information in a way that wasn't previously possible.
- devmach 15y agoAs a someone , who tortured with Prezi on academic level : While it's cool, - for the listeners - it's hard to follow, hard to take notes and hard to make connections between slides. It can make your product presentation bearable but if your goal is teach something to someone LaTeX, Ppt etc still beats it.
- ThomPete 15y agoWouldn't that depend on what you are trying to teach? There is a reason why animation is used. It's not just to show off. It actually creates new opportunities to explain difficult concepts because you can show it in a continuum rather than as slides. Look at what it did to Roslings presentation of stastistica data.
- mgualt 15y agoIs there a high-level markup language that I can use to output to this? E.g. LaTeX style document structure but for this kind of presentation output?
- tikhonj 15y agoI bet it would be fairly easy to plug this into org-mode. It already supports exporting to web-based presentation tools (I forget exactly which ones) so it's not without precedent. The tricky bit would be encoding the positions and transitions and effects, but that shouldn't be impossible.
- mgualt 15y agoThe developer should explain the concept behind the document/view. Is there a fixed document and then a view path/graph? I would be interested to know what the conceptual model is.
- c3d 15y agoThere's a tool that does 3D presentations called Tao Presentations, just around the corner. See http://www.taodyne.com http://www.taodyne.com. It also does "real" 3D (i.e. stereoscopy or auto-stereoscopy on Philips or Alioscopy screens). The description of slides looks close to what you are calling for: slide "test", * "First point" * "Second point" It doesn't output to Impress.js yet, but that sounds like an interesting opportunity.
- deleted 15y ago[deleted]
- scommab 15y agoWhile a very cool library, it will only be really useful once we get some content creation tools for it.
- jQueryIsAwesome 15y agoYou don't need special tools to create cool stuff with it; the presentation itself works as an example of how easy is to use it: https://github.com/bartaz/impress.js/blob/master/index.html https://github.com/bartaz/impress.js/blob/master/index.html
- scommab 15y agoWhile technically true, it isn't going to be easy to produce a general presentation for that code. There are a number of hardcoded x/y cords and specialized css classes ("<span class="have">have</span> <span class="you">you</span> <span class="noticed">noticed</span> <span class="its">it's</span> <span class="in">in</span>") What I'd love to see is a way for me to write relatively vanilla HTML, possibly run it through a parser (in a perfect world, I would just annotate it with css classes) and out comes a sexy presentation. Or maybe a wysiwyg UI, like how Prezi's interface works.
- sandGorgon 15y agoI would pay for this tool to take in something like MultiMarkdown and spit out a presentation. It could work with some custom markdown tags like First sl[[i](transition=leftrotate target=second slide)]de Personally, I dont have a presentation which I cant express through markdown.
- bartaz 15y agoProbably it's not stated clear enough (it's a very early release and I wasn't expecting such a buzz around it) that impress.js is meant to be responsible only of positioning the step elements (based on data attributes) and animating between them. Anything that is on a step is custom HTML and CSS and author is expected to write it. Stylesheet given is not meant to be a part of a library - it's just a demo. I know that it narrows the target users to people knowing HTML and CSS (on a quite good level) but it's just an experiment and a tool I use. If anyone finds it nice and helpful that's great. If not - it's not my fault. But for sure some detailed docs for impress.js are needed and I hope to write them soon.
- Flimm 15y agoUnfortunate name. Impress is the name of OpenOffice.org's presentation tool.
- j45 15y agoVery, very cool. I would use a tool based on this, are you thinking of building one out?
- naugtur 15y agoThere's this thread on github: https://github.com/bartaz/impress.js/issues/5 https://github.com/bartaz/impress.js/issues/5
- lwhi 15y agoI love this new format for presentations. I think the fact that slides are arranged in a spatially distinct way - and are linked fluidly - aids my comprehension. Would be interesting to find out if this is actually true (and not just expectation based upon novelty appeal).
- sharmajai 15y agoThis is mind-blowing, I like how he uses transitions to empower content. The transitions themselves are fantastic and like others in the thread I don't find them fancy at all, in fact I think they add movies like continuity to presentations for cheap, which if used wisely can enable story-telling style of information delivery. I can see myself using it for info-graphics and tutorials, other than presentations, by making it do non-linear (zooming in/out or using hrefs) flow of content. Oh now I realize why I liked it so much, it also removes the single most annoying feature of reading content on the web - the constant scrolling and zooming, like readability it alleviates that pain for you, by zooming in to the content that matters the most at this instant.
- pearkes 15y agoI would argue one of the reasons the demo is so effective is because it's expressing (in language) the same thing it's doing visually.
- cgcardona 15y agoLooks really nice. Good job.
- josscrowcroft 15y agoI love how it starts, definitely caught me off-guard!
- aridiculous 15y agoTried in Safari 5.0.2 and it's broken. Works great in Chrome.
- RandallBrown 15y agoIt works fine in 5.1
- aridiculous 15y agoI have a friend who gets paid to simply make Prezis for clients (large and small). The tool was designed for anyone to use and yet she still gets plenty of business. There is a gigantic market for making stuff that makes other people look good. People are looking for something that is like Powerpoint, but a bit better because PP is considered boring. This, if refined and made easier to use for intermediary content creators, has enormous financial potential because it works on all devices.
- skbohra123 15y agoThere's an inkscape extension Sozi http://sozi.baierouge.fr/wiki/en:welcome http://sozi.baierouge.fr/wiki/en:welcome which is also very easy to use tool to make prezi like presentation and it's also FOSS.
- flarg 15y agoI've used Sozi once before and it's pretty impressive for what it is and far easier to use than the tool we're discussing here - mainly because Inkscape is so cool.
- aniketpant 15y agoThis is just brilliant! I actually don't have any words to say now :D Love the work man.
- QuasiPreneur 15y agodamn..wish mobile webkit based browsers would support this..
- bartaz 15y agofrom technical point of view they do support it (when it comes to iPhone/iPad and newest Android) the problem may be a performance and different way of positioning things on the screen but I'd really like to see in running on iPad, maybe on Android tablets if possible, it's just not implemented yet
- lrizzo 15y agoexcellent tool. For content creation it could be coupled with some markdown tool written in javascript. I have been using this approach for a while, I put the content in a textarea and the browser does the conversion for you. The formatting instructions (to apply css styles) are similar to LaTeX which i am familiar with and is not too visually intrusive. You can see an example at http://info.iet.unipi.it/~luigi/netmap/slides.html http://info.iet.unipi.it/~luigi/netmap/slides.html
- darklajid 15y ago"I don't really expect it to run smoothly in non-webkit-based browser." That's the new 'optimized for IE 5 at 1024x768' it seems. Sad.
- rb2k_ 15y agoIs it? I think all that means is: "Your browser should support hardware accelerated CSS3 and have a fast Javascript VM". Isn't the standards-centric view pretty much the opposite of the browser-centric one?
- bartaz 15y agoTrue, but majority of the users doesn't know if their browser supports hardware accelerated CSS3 and has fast JS VM. And they probably don't care. Listing browsers (or with hardware acceleration browsers+systems) helps to know what configuration can be used to make it work.
- rb2k_ 15y agoIn that case "webkit-based" won't help non-technical users either :)
- darklajid 15y agoWell, no. The project already said what you suggest, in fact several times. Roughly: "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." More or less exactly what you said: "Impress.js is developed with current webkit-based browsers in mind (Chrome, Safari), but should work also in other browsers supporting CSS3 3D transforms and transitions (Firefox, IE10)." It even says it is tested with nightly builds of Firefox and _then_ came up with the previously quoted: "I don't really expect it to run smoothly in non-webkit-based browser." At this point the requirements are already defined, the tested browser setups are listed. This is just surprising insofar as that - the text before says that Firefox Aurora is tested as well (I've to admit I missed that reading the explanation the first time) - this (and that was my real point) becomes a ~standard~ disclaimer by now. Chrome it is, the rest be damned. I think that's sad and still stand by my comparison to 'IE optimization' for things like this.
- iambot 15y agolooks brilliant, pitty about the browser support, but thats to eb expected i suppose.
- pace 15y agoImpress.js is an awesome piece of tech—but I wouldn't use it for a presentation: There's just a very fine line between over- and underdoing a presentation. It's never good just to dash off a presentation with lousy layout and design but it may not be beneficial to overdo a presentation as well. Too much FX and animations makes you at a certain point needy: "Look what I did to impress you", "Look, another animation!", "How nice, isn't it??", "And here another 3D effect, awesome isn't it? I spent the entire day to make the rotation perfect, just for you because I like you!". After the 5th animation the viewers think you are a needy guy, needing approval, spending to much time on design than content and having nothing to do. Different with pure web presentations for a large audience, then such tools are nice, but I don't know if they convert better than a gold old landing page.
- brackin 15y agoYesterday was the first day I'd blocked Hacker News to get work done, ironically it was the moment when I needed something like this the most. Oh well, seems really cool. I'm glad the flash, closed alternative Prezi has a rival as this seems far more responsive.
- Metapony 15y agoIn looking at the stylesheet for the impress.js demo, I wonder if this http://leaverou.github.com/prefixfree/ http://leaverou.github.com/prefixfree/ would be useful to keep things tidy when rotating content and such.
- bartaz 15y agoProbably would. I was thinking about using it. I'm just still a little bit skeptical about JS lib re-downloading, parsing and appending my CSS.
- wyuenho 15y agoI'm actually a little surprised that no one has mentioned reveal.js yet. Different idea, but worth mentioning. Impress.js is more like those font animation we see lots these days. It's pretty cool.
- naugtur 15y agoIt was mentioned on HN (I started using it after spotting it on main page). Reveal.js is more practical for daily usage at the moment - basic HTML convention lets you work with it. But I'd prefer two separate stylesheets - the basics and a theme.