impress.js

From cubewebsites https://github.com/cubewebsites/Impress.js-Tutorial/

HTML

<div id="impress">
  <div class="no-support-message">
    Your browser doesn't support impress.js. Try Chrome or Safari.
  </div>

  <div class="step" data-x="0" data-y="0">
    This is my first slide. I start at 0,0. Welcome.
  </div>

  <div class="step" data-x="500" data-y="0">
    This is slide 2. It slides left 500 pixels.
  </div>

  <div class="step" data-x="500" data-y="-400">
    This is slide 3. It slides down 400 pixels.
  </div>

  <div class="step" data-x="500" data-y="-800" data-scale="0.5">
    This is slide 4. It scales everything up by a factor of 2.
  </div>

  <div class="step" data-x="0" data-y="-800" data-rotate="90">
    This is slide 5 and it rotates in.
  </div>

  <div class="step" data-x="-100" data-y="-800" data-rotate-x="60" data-rotate-y="60" data-rotate-z="30">
    This is slide 6 and it has a 3D transition.
  </div>

  <div class="step" data-x="-2600" data-y="-800" data-rotate-x="30" data-rotate-y="-60" data-rotate-z="90" data-scale="4">
    This is slide 7 and it has a 3D transition AND a scale.
  </div>

</div>

CSS

.no-support-message {
  display: none;
}

.impress-not-supported .no-support-message {
  display: block;
}


/* additional styles just to make things look a bit nicer */

body {
  background: #EBEBEB;
  font: 16px/24px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: #333;
}

.step {
  width: 940px;
  margin: 0 auto 24px auto;
  text-align: center;
}

JavaScript

/**
 * impress.js
 *
 * impress.js is a presentation tool based on the power of CSS3 transforms and transitions
 * in modern browsers and inspired by the idea behind prezi.com.
 *
 * MIT Licensed.
 *
 * Copyright 2011 Bartek Szopka (@bartaz)
 */

(function(document, window) {

  // HELPER FUNCTIONS

  var pfx = (function() {

    var style = document.createElement('dummy').style,
      prefixes = 'Webkit Moz O ms Khtml'.split(' '),
      memory = {};

    return function(prop) {
      if (typeof memory[prop] === "undefined") {

        var ucProp = prop.charAt(0).toUpperCase() + prop.substr(1),
          props = (prop + ' ' + prefixes.join(ucProp + ' ') + ucProp).split(' ');

        memory[prop] = null;
        for (var i in props) {
          if (style[props[i]] !== undefined) {
            memory[prop] = props[i];
            break;
          }
        }

      }

      return memory[prop];
    }

  })();

  var arrayify = function(a) {
    return [].slice.call(a);
  };

  var css = function(el, props) {
    var key, pkey;
    for (key in props) {
      if (props.hasOwnProperty(key)) {
        pkey = pfx(key);
        if (pkey != null) {
          el.style[pkey] = props[key];
        }
      }
    }
    return el;
  }

  var byId = function(id) {
    return document.getElementById(id);
  }

  var $ = function(selector, context) {
    context = context || document;
    return context.querySelector(selector);
  };

  var $$ = function(selector, context) {
    context = context || document;
    return arrayify(context.querySelectorAll(selector));
  };

  var translate = function(t) {
    return " translate3d(" + t.x + "px," + t.y + "px," + t.z + "px) ";
  };

  var rotate = function(r, revert) {
    var rX = " rotateX(" + r.x + "deg) ",
      rY = " rotateY(" + r.y + "deg) ",
      rZ = " rotateZ(" + r.z + "deg) ";

    return revert ? rZ + rY + rX : rX + rY + rZ;
  };

  var scale = function(s) {
    return " scaleX(" + s.x + ") scaleY(" + s.y + ") scaleZ(" +...