initial commit of impress.js and demo presentation

impress.css

@@ -0,0 +1,50 @@
+html { height: 100% }
+
+body {
+    height: 100%;
+
+    overflow: hidden;
+}
+
+#impress {
+    width: 0px;
+    height: 0px;
+
+    position: absolute;
+    top: 50%; left: 50%;
+}
+
+#impress .scale {
+    width: 0px;
+    height: 0px;
+    
+    position: relative;
+    
+    -webkit-transform: scale(1);
+    -webkit-transition: -webkit-transform 1s ease-in-out;
+    -webkit-transform-origin: top left;
+    
+    -moz-transform: scale(1);
+    -moz-transition: -moz-transform 1s ease-in-out;
+    -moz-transform-origin: top left;
+}
+
+#impress .rotate {
+    width: 0px;
+    height: 0px;
+    
+    position: absolute; top: 0; right: 0; left: 0; bottom: 0;
+    
+    -webkit-transform: rotate(0);
+    -webkit-transition: -webkit-transform 1s ease-in-out;
+    -webkit-transform-origin: top left;
+    
+    -moz-transform: rotate(0);
+    -moz-transition: -moz-transform 1s ease-in-out;
+    -moz-transform-origin: top left;
+}
+
+#impress .step {
+    position: absolute;
+}
+

impress.js

@@ -0,0 +1,123 @@
+(function() {
+
+    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 $ = function(s) { return document.querySelector(s) };
+    
+    var $$ = function(selector){
+        return [].slice.call(document.querySelectorAll(selector));
+    }
+    
+    var canvas = document.getElementById("canvas");
+    canvas.rotate = canvas.querySelector(".rotate");
+    
+    canvas.dataset["x"] = "0";
+    canvas.dataset["y"] = "0";
+    canvas.dataset["rotate"] = "0";
+    canvas.dataset["scale"] = "1";
+
+    var current = canvas.dataset;
+
+    var translate = function (x,y) { return " translate3d(" + x + "px," + y + "px, 0) "; }
+    var rotate = function (a) { return " rotate(" + a + "deg) "; }
+    var scale = function (s) { return " scale(" + s + ") "; }
+    
+    var steps = $$(".step");
+        
+    steps.forEach(function(el){
+        var step = el.dataset;
+        
+        step.x = step.x || 0;
+        step.y = step.y || 0;
+        step.rotate = step.rotate || 0;
+        step.scale = step.scale || 1;
+        
+        el.style[_pfx("transform")] =  "translate(-50%,-50%)" +
+                                 translate(step.x, step.y) +
+                                 rotate(step.rotate) +
+                                 scale(step.scale)
+        
+    });
+    
+    function select(el) {
+        var step = el.dataset;
+
+        if ($(".step.active")) {
+            $(".step.active").classList.remove("active");
+        }
+        el.classList.add("active");
+
+        document.getElementById("impress").className = "step-" + el.id;
+        
+        var target = {
+            rotate: -parseInt(step.rotate, 10),
+            scale: 1 / parseFloat(step.scale)
+        };
+        
+        target.x = -step.x;
+        target.y = -step.y;
+
+        canvas.style[ _pfx("transform") ] = scale(target.scale);
+        canvas.style[ _pfx("transitionDelay") ] = (target.scale > current.scale ? "300ms" : "0");
+        
+        canvas.rotate.style[ _pfx("transform") ] = rotate(target.rotate) + translate(target.x, target.y);
+        canvas.rotate.style[ _pfx("transformDelay") ] = (target.scale > current.scale ? "0" : "300ms");
+        
+        current["x"] = target["x"];
+        current["y"] = target["y"];
+        current["rotate"] = target["rotate"];
+        current["scale"] = target["scale"];
+    }
+    
+    document.addEventListener("keydown", function(event){
+        if( event.keyCode == 32 || (event.keyCode >= 37 && event.keyCode <= 40) ) {
+            var next = null;
+            var active = document.querySelector(".step.active");
+            switch( event.keyCode ) {
+                case 37: ; // left
+                case 38:   // up
+                         next = steps.indexOf( active ) - 1;
+                         next = next >= 0 ? steps[ next ] : steps[ steps.length-1 ];
+                         break; 
+                case 32: ; // space
+                case 39: ; // right
+                case 40:   // down
+                         next = steps.indexOf( active ) + 1;
+                         next = next < steps.length ? steps[ next ] : steps[ 0 ];
+                         break; 
+            }
+            
+            select(next);
+            
+            event.preventDefault();
+        }
+    }, false);
+    
+    select(steps[0]);
+})();
+

index.html

@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <title>impress.js | presentation framework based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz</title>
+    
+    <meta name="description" content="It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.">
+    <meta name="author" content="Bartek Szopka" />
+
+    <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|Crimson+Text:400,700,400italic" rel="stylesheet" />
+
+    <link href="impress.css" rel="stylesheet" />
+    <link href="style.css" rel="stylesheet" />
+</head>
+<body>
+
+<div id="impress">
+<div id="canvas" class="scale"><div class="rotate">
+
+    <div id="bored" class="step slide" data-x="-1000" data-y="-1000">
+        <q>Aren't you just <b>bored</b> with all those slides-based presentations?</q>
+    </div>
+
+    <div id="limits" class="step slide" data-x="0" data-y="-1000">
+        <q>Don't you think that presentations given <strong>in modern browsers</strong> shouldn't <strong>copy the limits</strong> of 'classic' slide decks?</q>
+    </div>
+
+    <div id="visualisation" class="step slide" data-x="1000" data-y="-1000">
+        <q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q>
+    </div>
+
+    <div id="title" class="step" data-x="0" data-y="0" data-scale="3">
+        <span class="try">than you should try</span>
+        <h1>impress.js<sup>*</sup></h1>
+        <span class="footnote"><sup>*</sup> no rhyme intended</span>
+    </div>
+
+    <div id="its" class="step" data-x="0" data-y="3000" data-rotate="90" data-scale="6">
+        <p>It's a <strong>presentation framework</strong> <br/>
+        inspired by the idea behind <a href="http://prezi.com">Prezi.com</a> <br/>
+        and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p>
+    </div>
+
+
+</div></div><!-- #canvas.scale > .rotate -->
+</div><!-- #impress -->
+
+<script src="impress.js"></script>
+
+</body>
+</html>

style.css

@@ -0,0 +1,164 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+body {
+    line-height: 1;
+}
+ol, ul {
+    list-style: none;
+}
+blockquote, q {
+    quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+
+body {
+    min-height: 740px;
+
+    background: rgb(215, 215, 215);
+    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
+    background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+    background:    -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+    background:      -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+    background:         radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+
+    -webkit-font-smoothing: antialiased;
+}
+
+
+.step {
+    width: 900px;
+    padding: 40px 60px;
+
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing:    border-box;
+    -o-box-sizing:      border-box;
+    box-sizing:         border-box;
+
+    font-family: 'Crimson Text', georgia, times, serif;
+    font-size: 32px;
+    line-height: 42px;
+}
+
+b, strong { font-weight: bold }
+
+a { color: inherit; }
+
+
+/* step specific styles */
+
+#title { padding: 0; }
+
+#title .try {
+
+    font-size: 64px;
+    line-height: 1.3;
+    position: absolute;
+    top: -0.5em;
+    left: 1.5em;
+}
+
+#title h1 {
+    font-size: 190px;
+    line-height: 250px;
+}
+
+#its { font-size: 48px; line-height: 62px; }
+
+
+/*
+ * Inspired by:
+ * http://html5slides.googlecode.com/svn/trunk/styles.css
+ *
+ * ;)
+ */
+
+.slide {
+    display: block;
+
+    width: 900px;
+    height: 700px;
+
+    padding: 40px 60px;
+
+    box-sizing: border-box;
+    -o-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+
+    border-radius: 10px;
+    -o-border-radius: 10px;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+
+    background-color: white;
+
+    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
+    border: 1px solid rgba(0, 0, 0, .3);
+
+    transition: transform .3s ease-out;
+    -o-transition: -o-transform .3s ease-out;
+    -moz-transition: -moz-transform .3s ease-out;
+    -webkit-transition: -webkit-transform .3s ease-out;
+
+    font-family: 'Open Sans', Arial, sans-serif;
+
+    color: rgb(102, 102, 102);
+    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
+
+    font-size: 30px;
+    line-height: 36px;
+
+    letter-spacing: -1px;
+}
+
+.slide q {
+    display: block;
+    font-size: 50px;
+    line-height: 72px;
+
+    margin-top: 100px;
+}
+
+.slide q strong {
+    font-size: 65px;
+    white-space: nowrap;
+}