A jQuery port of impress.js based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

Getting Started

The only required files are jQuery and js/jmpress.js to use.
For a quick and simple example look at the examples/simple/index.html and examples/simple/simple.css.

Migrating From impress.js

Currently jmpress.js includes all of the impress.js features and a lot more. To migrate simply add jQuery, change impress.js to jmpress.js and call $(selector).jmpress(); to initialize. Take a look at the impress.js running on jmpress.js example.

Basic Usage

Create a root element:

<div id="jmpress"></div>

Fill it up with steps:

<div id="jmpress">
	<div class="step">Slide 1</div>
	<div class="step">Slide 2</div>
</div>

Tell jQuery to run it:

$(function() {
	$('#jmpress').jmpress();
});

Configure jmpress
Don't want to use `.step` as a selector? Okay:

$('#jmpress').jmpress({
	stepSelector: 'li'
});

See more option on next slide

Customize the hash id of each slide
The id of the step will appear as the URI hash to recall the slide later. If you don't give your steps ids then the id `step-N` will be used.

<div id="name-of-slide" class="step" 
		data-x="3500" data-y="-850" 
		data-rotate="270" data-scale="6">
	Slide 1
</div>

Load slides dynamically
You can load a slide dynamically by setting the `data-src` or `href` attribute on the slide. The slide will only be loaded when an adjacent slide or the slide itself is selected.

<div class="step" data-src="slides/slide-1.html" data-x="500" data-y="300">
	Loading...
</div>

read more:http://shama.github.com/jmpress.js/