initial commit of impress.js and demo presentation
This commit is contained in:
Bartek Szopka
50
impress.css
Normal file
50
impress.css
Normal file
@@ -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;
|
||||
}
|
||||
|
||||
123
impress.js
Normal file
123
impress.js
Normal file
@@ -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]);
|
||||
})();
|
||||
|
||||
51
index.html
Normal file
51
index.html
Normal file
@@ -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>
|
||||
164
style.css
Normal file
164
style.css
Normal file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user