From c46d39b0de9da0b66c7cbf18fcae08e363c417d7 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 28 Dec 2011 23:32:42 +0100 Subject: [PATCH] initial commit of impress.js and demo presentation --- impress.css | 50 ++++++++++++++++ impress.js | 123 +++++++++++++++++++++++++++++++++++++++ index.html | 51 ++++++++++++++++ style.css | 164 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 388 insertions(+) create mode 100644 impress.css create mode 100644 impress.js create mode 100644 index.html create mode 100644 style.css diff --git a/impress.css b/impress.css new file mode 100644 index 0000000..bcdd06a --- /dev/null +++ b/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; +} + diff --git a/impress.js b/impress.js new file mode 100644 index 0000000..51638cb --- /dev/null +++ b/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]); +})(); + diff --git a/index.html b/index.html new file mode 100644 index 0000000..622d398 --- /dev/null +++ b/index.html @@ -0,0 +1,51 @@ + + + + + impress.js | presentation framework based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz + + + + + + + + + + + +
+
+ +
+ Aren't you just bored with all those slides-based presentations? +
+ +
+ Don't you think that presentations given in modern browsers shouldn't copy the limits of 'classic' slide decks? +
+ +
+ Would you like to impress your audience with stunning visualization of your talk? +
+ +
+ than you should try +

impress.js*

+ * no rhyme intended +
+ +
+

It's a presentation framework
+ inspired by the idea behind Prezi.com
+ and based on the power of CSS3 transforms and transitions in modern browsers.

+
+ + +
+
+ + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..f36e5fd --- /dev/null +++ b/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; +}