Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Create Impressive Presentations with Impress.js

Russ Feldhausen - NETC 2014

impress.js

What is impress.js?

Why impress.js?

My experiences

The Basics - HTML

<div id="experience" class="step slide"
  data-x="4000" data-y="0" data-z="0" 
  data-rotate-x="15" data-scale="2.0">

<div>

The Basics - CSS

.step {
  position:     relative;

  width:        1000px;
  padding:      40px;
  margin:       20px auto;

  box-sizing:   border-box;
  font-family:  'Open Sans', Arial, sans-serif;
  font-size:    48px;
  line-height:  1.5;
}

The Basics - CSS

.slide {
  display:        block;

  width:          1000px;
  height:         750px;
  padding:        40px 60px;

  background-color: white;
  border:         1px solid rgba(0, 0, 0, .3);
  border-radius:  10px;
  box-shadow:     0 2px 6px rgba(0, 0, 0, .1);
}

The Basics - Javascript

css(root, {
  transform: perspective( config.perspective / 
        targetScale ) + scale( targetScale ),
  transitionDuration: duration + "ms",
  transitionDelay: (zoomin ? delay : 0) + "ms"
});

css(canvas, {
  transform: rotate(target.rotate, true) + 
        translate(target.translate),
  transitionDuration: duration + "ms",
  transitionDelay: (zoomin ? 0 : delay) + "ms"
});

How it Works

Skip HTML Code

<div id="cool_stuff" class="skip" data-x="0" data-y="1810">
  <p class="centertext"><b>Cool Stuff To Try</b><br><br></p>
  <ul>
    <li>Create a slide with<br>the 'skip' CSS class</li>
    <br><br>
    <li>and show multiple views of the same slide!</li>
  </ul>
</div>

<div id="cool_stuff_1" class="step" data-x="-100" 
     data-y="1700" data-scale="0.7">
</div>

<div id="cool_stuff_2" class="step" data-x="0" data-y="1800">
</div>

Cool Stuff To Try

Stack Slides One on Another





To Reveal Content Slowly

Stacked HTML Code

<div id="cool_stuff_3" class="step slide" data-x="2000" 
      data-y="1800">
  <p class="centertext"><b>Cool Stuff To Try</b><br><br></p>
  <p>Stack Slides One on Another</p>
</div>

<div id="cool_stuff_4" class="step slide" data-x="2000" 
      data-y="1800" data-z="-1">
  <br><br><br><br><p>To Reveal Content Slowly</p>
</div>

Video Embed HTML Code

<div id="apollo13" class="step" data-x="0" data-y="2700">
  <div id="34664087" class="vimeo" data-start="33">
    <p><a href="http://vimeo.com/34664087">
        Apollo 13 on Vimeo</a></p>
  </div>
</div>

<div id="jacquard_vid" class="step" data-x="1000" data-y="2700">
  <div id="NSjmFD6Q7hw" data-id="NSjmFD6Q7hw" 
        class="youtube" data-start="5">
    <a href="http://www.youtube.com/watch?v=NSjmFD6Q7hw">
        Jacquard Loom on YouTube</a>
  </div>
</div>

My info