Simple html5 talks - Christopher Prohm

In this short tutorial I want to show you how to create simple html5 talks using jmpress. One particularity about jmpress is, that relies exclusively on CSS to layout your slides and some working knowledege of CSS is highly desireable.

At its core jmpress is based around the concept of an ifinite canvas, into which you place your slides however you want. While this allows for some very impressive effects, I will focus here on creating more traditional looking slides, which use sparing effects to highlight topical changes. To show you so ropes, let's walk through a simple presentation step by step.

First we give the presentation a nice title and link to the stylesheet, which follows below.

<html>
<head>
    <title>Simple html5 talk</title>
    <link rel="stylesheet" type="text/css" 
        href="slides.css"/>
</head>

After the header information is done, you can start directly to specify the slide. Each slide has a position, in a 3D space, which can be set by using special data attributes. To specify the position the most important attributes are

data-x, data-y, data-z: the x, y, z position
data-rotate-x, data-rotate-y, data-rotate-z: rotation in degrees around the x, y, z axis

It's important to note, that all units are specified using pixels. Hence it makes sense to use also pixels to specify the slide dimensions and then let jmpress resize the slides. Per default all slides are positions are 0,0,0.

The slides are grouped into a single div element and can be any element. To let jmpress now, which elements should be considered slides, they are marked by a special css class (per default 'step').

<body>
    <div id="slides">
        <!-- a slide with a bullet list -->
        <div class="step">
            <h1>First slide</h1>
            <ul>
                <li>First bullet</li>
                <li>Second bullet</li>
            </ul>
        </div>

        <!-- another slide with an image -->
        <div class="step" data-x="250" data-rotate-z="15">
            <h1>Second slide</h1>
            <img src="html5.svg" style="width:50%; margin: auto;"/>
            <br/>
            <a href="http://w3c.org">Picture by the W3C</a>
        </div>
    </div>

All that's left now is to include jquery & jmpress and let them do their magic.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jmpress.js"></script>

To make sure we have a similar look across browser window sizes, we also use the viewport plugin.

    <script type="text/javascript">
        $("#slides").jmpress({
            viewPort: {
                width: 1300,
                height: 1000
            }
        });
    </script>
</html>

The look of your slides can then be tailored by the stylesheet, we've referenced in the header. For a simple traditional slide look you may start with something along the lines of the following style. Note, that again we specify all dimensions in pixels.

body {
    font-family: sans-serif;
}

.step {
    background-color: white;
    width: 1200px;
    height: 900px;
    border: 2px solid black;
    font-size: 30px;
    padding: 25px;
}

h1 { font-size: 1.5em; }

To setup smooth nice transitions between slides, we make non active slides invisible and add a nice transition.

.step {
    transition-timing-function: ease;
    transition: opacity 0.25s;
}

.step:not(.active) {
    opacity: 0.0;
}

That's it. Now we completed our first presentation using jmpress. You can have a look at the finished version right here. The next time I will discuss how jmpress animations work.