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.
jmpress.js demo: [http:https://shama.github.com/jmpress.js]
jmpress.js is made for the latest browsers. Old browsers get old styles. Here is the support list for the latest version of each browser/device:
- Chrome/Chromium: YES
- Safari: YES
- Firefox: ALMOST
- IE: NO
- Opera: PARTIAL
- iPad: YES (but could be better)
- iPhone/iPod: PARTIAL
- Android: ?
Take a look at the index.html and css/style.css for an example.
The only required files are jQuery and js/jmpress.js to use.
<div id="jmpress"></div>
<div id="jmpress">
<div class="step">Slide 1</div>
<div class="step">Slide 2</div>
</div>
<div id="jmpress">
<div class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">Slide 1</div>
<div class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">Slide 2</div>
</div>
<script type="text/javascript">
$(function() {
$('#jmpress').jmpress();
});
</script>
Don't want to use .step as a selector? Okay:
$('#jmpress').jmpress({
stepSelector: 'li'
});
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>
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>
Each step element can have the following data properties set:
- data-x: X Position
- data-y: Y Position
- data-z: Z Position
- data-scale: Scale of element
- data-rotation: Degree of rotation
- data-rotation-x: Degree of rotation on x-axis
- data-rotation-y: Degree of rotation on y-axis
- data-rotation-z: Degree of rotation on z-axis
- data-src: Load content of slide dynamically
$(selector).jmpress({
// jQuery selector to select each step
stepSelector: '.step'
// Class name to give the canvas
,canvasClass: 'canvas'
// Class name to trigger if jmpress is not supported
,notSupportedClass: 'not-supported'
// Customize the animations (or CSS) used
,animation: {
,transitionDuration: '5s'
,transitionTimingFunction: 'linear'
}
});
// Next slide
$(selector).jmpress('next');
// Previous slide
$(selector).jmpress('prev');
// Goto a slide
$(selector).jmpress('select', '#slide-id');
$(selector).jmpress('select', $(selector));
// Manipulate the canvas
$(selector).jmpress('canvas', {
transform: 'rotate(7deg)'
});
// Manipulate an element
$(selector).jmpress('css', $('#step-1'), {
transform: 'scale(0.5)'
});
// Set a beforeChange callback
$(selector).jmpress('beforeChange', function( slide ) {
// Called on the start of each slide change
});
Good news! I accept pull requests ;) Please work and pull against the dev
branch. Thanks!
jmpress.js uses the jasmine bdd library
for testing. Please load test.html in your browser to run the tests.
Copyright 2012 Kyle Robinson Young. Released under a MIT license.