Examples

Important

All plataform files (such as deck.js or jmpress.js) are supposed to be already downloaded at css and javascript directories.

1. simple.rst

A simple presentation with 4 slides. One of them has a subtitle and another one doesn’t have a title.

Slide 1
=======

Slide contents

Slide 2
=======

Subtitle
--------

* item A
* item B

----

No title here

Final Slide
===========

This is the last one

To convert it to a deck presentation, there is no additional adjustments needed since deck.js follows a linear flow. The command to build it is shown below:

rst2html5slides \
    --template templates/deck-template.html \
    simple.rst simple_deck.html

You can see the result here.

To build a jmpress/impress presentation, it is necessary to define some sort of positional distribution. Fortunately, rst2html5slides provides a few default functions. The command to build a jmpress presentation from the same previous simple presentation is:

rst2html5slides \
    --template templates/jmpress_template.html \
    --stylesheet 'css/simple.css' \
    --deck-selector 'div#jmpress' \
    --slide-selector 'div.step' \
    --distribution linear \
    simple.rst simple_jmpress.html

See the result: simple_jmpress.html.

2. jmpress.rst

Impress.js has a nice demo presentation that shows how it works. Jmpress.js also has the same presentation. Now, rst2html5slides shows how to produce that presentation from a reStructuredText file:

.. title:: impress example | jmpress.js | rst2html5slides
.. meta::
    :viewport: width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=yes

.. presentation::
    :deck-selector: div#jmpress
    :slide-selector: div.step


:data-x: -1000
:data-y: -1500
:id: bored
:class: slide

Aren't you just **bored** with all those slides-based presentations?


:data-x: 0
:class: slide

Don't you think that presentations given in **modern browsers** shouldn't
**copy the limits** of 'classic' slide decks?


:data-x: 1000
:class: slide

Would you like to **impress your audience** with
**stunning visualization** of your talk?


:data-x: 0
:data-y: 0
:data-scale: 4
:id: title

.. role:: try
.. role:: footnote
.. role:: title

:try:`then you should try`

:title:`impress.js` :sup:`*`

:footnote:`* no rhyme intended`


:data-x: 850
:data-y: 3000
:data-rotate: 90
:data-scale: 5
:id: its

It's a **presentation tool**
inspired by the idea behind `prezi.com <http://prezi.com>`_
and based on the **power of CSS3 transforms and transitions** in modern browsers.


:data-x: 3500
:data-y: 2100
:data-rotate: 180
:data-scale: 6
:id: big

.. role:: thoughts

visualize your **big** :thoughts:`thoughts`


:id: tiny
:data-x: 2825
:data-y: 2325
:data-z: -3000
:data-rotate: 300
:data-scale: 1

and **tiny** ideas


:id: ing
:data-x: 3500
:data-y: -850
:data-z: 0
:data-rotate: 270
:data-scale: 6

.. role:: positioning
.. role:: rotating
.. role:: scaling

by :positioning:`positioning`, :rotating:`rotating` and :scaling:`scaling`
them on an infinite canvas


:id: imagination
:data-x: 6700
:data-y: -300
:data-scale: 6
:data-rotate: 0
:data-z: 0

.. role:: imagination

the only **limit** is your :imagination:`imagination`


:id: source
:data-x: 6300
:data-y: 2000
:data-rotate: 20
:data-scale: 4

want to know more?
`use the source <http://github.com/bartaz/impress.js>`_, Luke!


:id: one-more-thing
:data-x: 6000
:data-y: 4000
:data-rotate: 0
:data-scale: 2

one more thing...


:id: its-in-3d
:data-x: 6200
:data-y: 4300
:data-z: -100
:data-rotate-x: -40
:data-rotate-y: 10
:data-scale: 2

.. role:: have
.. role:: you
.. role:: noticed
.. role:: its
.. role:: in
.. role:: footnote

:have:`have` :you:`you` :noticed:`noticed` :its:`it's` in **3D**:sup:`*`?
:footnote:`* beat that, prezi :)`


:id: overview
:data-x: 3000
:data-y: 1500
:data-scale: 10
:data-rotate-x: 0
:data-rotate-y: 0
:data-rotate-z: 0

.. empty slide

You can build it using a template:

rst2html5slides \
    --template templates/jmpress_template.html \
    jmpress.rst jmpress_via_template.html

or via parameters:

rst2html5slides \
    --stylesheet "http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" \
    --stylesheet css/impress.css \
    --script http://code.jquery.com/jquery-latest.min.js \
    --script js/jmpress/jmpress.js \
    --script-defer js/jmpress/jmpress_init.js \
    jmpress.rst jmpress_via_parameters.html

The first and the second generated files are equivalent and pretty close to the originals, aren’t they?