YOU CAN USE YOUR ARROW KEYS OR SPACEBAR TO NAVIGATE
by sokra & shama
build a website on the infinite canvas

I am

pure <html>, .css {} and function javascript() {}

and use CSS3 transitions and transformations.

I can pan,
rotate
and scale

between elements on an infinite canvas.

I currently work

with most modern web browsers

and fallback to simpler transitions with unsupported browsers.

  • yes
  • yes
  • partly
  • yes
  • partly

I started as a

a jQuery port of impress.js

but I have become much, much more.

here are

some of my features

get started quickly

by using one of our pre-made presentation templates

Simple, jQuery UI


Don't know HTML or CSS? Beta drag and drop presentation builders are being developed in the community: Strut & Impressionist.

press p

to open presenter notes

move your notes off the main screen and have them follow along with your main presentation.

press esc

to de-initialize jmpress.js

allowing your presentation to be printed.

press + and -

to zoom in and out of a step

or use your mouse wheel.

custom animations

using the data-jmpress attribute

press the next arrow key or spacebar to view...
  • <div data-jmpress="fade"/>
  • <div data-jmpress="drive-right after 500ms"/>
  • <div data-jmpress="drive-up after 500ms"/>
  • <div data-jmpress="warp-right after 500ms"/>
  • <div data-jmpress="fade after 500ms"/>
  • <div data-jmpress="drive-right after 500ms"/>
  • read more about animations

i am

developer friendly

and have a great plugin interface to extend from.

want cleaner HTML?

use templates

set the attributes of your elements with javascript:

$.jmpress('template', 'arraytemplate', {
    x: 100, y: 100, scale: 2,
    children: [
        { x: 0, y: 150, scale: 0.2 },
        { x: 0, y: 450, scale: 0.3 }
    ]
});
// or even better, use a function
$.jmpress('template', 'functiontemplate', {
    x: 100, y: 100, scale: 2,
    children: function(i) {
        return { x: i * 200 };
    }
});

Then use on your parent element: <div data-template="functiontemplate"/>

easily

nest or embed jmpress

on a page or even within another jmpress

jmpress can be used for more than

presentations

let's go >

embed your presentation

into your blog

create a fun slideshow

on your website

like this one on codrops

combine with the duration-plugin

to auto advance your slides

load

with ajax

Just set the href or data-src attributes.

customize

all the controls

Map any key to an action in jmpress.js, read more.

// bind the 'o' key to select a step with the id 'overview'
$('#jmpress').jmpress({
    keyboard: {
        keys: {
            79: ['select', '#overview']
        }
    }
});

change the flow with

routing

$('#jmpress').jmpress('route', [
    '#one', '#three', '#two', '#four'
]);

read more about routing

apply

secondary animations

$.jmpress('apply', '#secondary', {
    secondary: {
        rotate: { z: 20, x: 20, y:20 },
        '': 'self'
    }
});

read more about the secondard plugin

examples

and more community examples here.