impress.js

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

by brianlmerritt

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 +...