- j
- m
- p
- r
- e
- s
- s
- .
- j
- s
build a website on the infinite canvas
I am
pure <html>
, .css {}
and function javascript() {}
and use CSS3 transitions and transformations.
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
embed your presentation
into your blog
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
basic
advanced
presentation templates