"Zoom", "pan" and "tilt" in HTML5 similar to a Prezi presentation

Question

I want to make a landing page similar to a Prezi presentation, with automatic zoom tilt and pan features. Could you point me to something thing similar so that I can work on it?

Answer 1

I know that's a bit too late for a timely answer, but you can try Impress.js.

Answer 2

There is a tool called impress.js (http://bartaz.github.io/impress.js/#/bored) that is very cool to achieve what you want.

Check up the page, you'll see that is a demo itself (and don't forget to see the source, documentation is there).

Hope this might help you, anything please let me know.

Answer 3

There is also Strut which is a GUI for authoring impress.js presentations. Here is a demo video: http://www.youtube.com/watch?v=zA5s8wwme44

Answer 4

There is now Webpgr. It's an Photoshop-like online editor for exactly creating zooming panning and tilting landing pages.

Answer 5

If you really want to get jiggy with the zoom, you should be peeping: http://jaukia.github.io/zoomooz/ That is wayyy more fun than impress.js for reppin' the Prezi

Answer 6

Have a look at layerJS, an open source library which can create Prezi-like HMTL5 web interfaces. You can define neighborship of frames which enables touch and mouse gestures to transition between frames. It even allows multiple layers if you need some elements to move independently of each other.

It's super simple: just add a stage div put one or more layers in and add as many frames as you want between you can have zooming, panning and rotating transitions.

There is more than just Prezi like transitions by using a different layer layout type than "canvas". Just have a look at the documentation.

The HTML code would look like this:

<div data-wl-type="stage">
  <div data-wl-type="layer" data-wl-layout-type="canvas">
    <div data-wl-type="frame" data-wl-name="frame1" data-wl-x="100" data-wl-width="1000" data-wl-rotation="45" ...>
    </div>
    <div data-wl-type="frame" data-wl-neighbors-l="frame1" ...>
    </div>
  </div>
</div>