Skip to content

Commit c46d39b

Browse files
bartazbartaz
committed
initial commit of impress.js and demo presentation
1 parent 0c7f9cc commit c46d39b

File tree

4 files changed

+388
-0
lines changed

4 files changed

+388
-0
lines changed

‎impress.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
html { height: 100% }
2+
3+
body {
4+
height: 100%;
5+
6+
overflow: hidden;
7+
}
8+
9+
#impress {
10+
width: 0px;
11+
height: 0px;
12+
13+
position: absolute;
14+
top: 50%; left: 50%;
15+
}
16+
17+
#impress .scale {
18+
width: 0px;
19+
height: 0px;
20+
21+
position: relative;
22+
23+
-webkit-transform: scale(1);
24+
-webkit-transition: -webkit-transform 1s ease-in-out;
25+
-webkit-transform-origin: top left;
26+
27+
-moz-transform: scale(1);
28+
-moz-transition: -moz-transform 1s ease-in-out;
29+
-moz-transform-origin: top left;
30+
}
31+
32+
#impress .rotate {
33+
width: 0px;
34+
height: 0px;
35+
36+
position: absolute; top: 0; right: 0; left: 0; bottom: 0;
37+
38+
-webkit-transform: rotate(0);
39+
-webkit-transition: -webkit-transform 1s ease-in-out;
40+
-webkit-transform-origin: top left;
41+
42+
-moz-transform: rotate(0);
43+
-moz-transition: -moz-transform 1s ease-in-out;
44+
-moz-transform-origin: top left;
45+
}
46+
47+
#impress .step {
48+
position: absolute;
49+
}
50+

‎impress.js‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
(function() {
2+
3+
var _pfx = (function () {
4+
5+
var style = document.createElement('dummy').style,
6+
prefixes = 'Webkit Moz O ms Khtml'.split(' '),
7+
memory = {};
8+
9+
return function ( prop ) {
10+
if ( typeof memory[ prop ] === "undefined" ) {
11+
12+
var ucProp = prop.charAt(0).toUpperCase() + prop.substr(1),
13+
props = (prop + ' ' + prefixes.join(ucProp + ' ') + ucProp).split(' ');
14+
15+
memory[ prop ] = null;
16+
for ( var i in props ) {
17+
if ( style[ props[i] ] !== undefined ) {
18+
memory[ prop ] = props[i];
19+
break;
20+
}
21+
}
22+
23+
}
24+
25+
return memory[ prop ];
26+
}
27+
28+
})();
29+
30+
var $ = function(s) { return document.querySelector(s) };
31+
32+
var $$ = function(selector){
33+
return [].slice.call(document.querySelectorAll(selector));
34+
}
35+
36+
var canvas = document.getElementById("canvas");
37+
canvas.rotate = canvas.querySelector(".rotate");
38+
39+
canvas.dataset["x"] = "0";
40+
canvas.dataset["y"] = "0";
41+
canvas.dataset["rotate"] = "0";
42+
canvas.dataset["scale"] = "1";
43+
44+
var current = canvas.dataset;
45+
46+
var translate = function (x,y) { return " translate3d(" + x + "px," + y + "px, 0) "; }
47+
var rotate = function (a) { return " rotate(" + a + "deg) "; }
48+
var scale = function (s) { return " scale(" + s + ") "; }
49+
50+
var steps = $$(".step");
51+
52+
steps.forEach(function(el){
53+
var step = el.dataset;
54+
55+
step.x = step.x || 0;
56+
step.y = step.y || 0;
57+
step.rotate = step.rotate || 0;
58+
step.scale = step.scale || 1;
59+
60+
el.style[_pfx("transform")] = "translate(-50%,-50%)" +
61+
translate(step.x, step.y) +
62+
rotate(step.rotate) +
63+
scale(step.scale)
64+
65+
});
66+
67+
function select(el) {
68+
var step = el.dataset;
69+
70+
if ($(".step.active")) {
71+
$(".step.active").classList.remove("active");
72+
}
73+
el.classList.add("active");
74+
75+
document.getElementById("impress").className = "step-" + el.id;
76+
77+
var target = {
78+
rotate: -parseInt(step.rotate, 10),
79+
scale: 1 / parseFloat(step.scale)
80+
};
81+
82+
target.x = -step.x;
83+
target.y = -step.y;
84+
85+
canvas.style[ _pfx("transform") ] = scale(target.scale);
86+
canvas.style[ _pfx("transitionDelay") ] = (target.scale > current.scale ? "300ms" : "0");
87+
88+
canvas.rotate.style[ _pfx("transform") ] = rotate(target.rotate) + translate(target.x, target.y);
89+
canvas.rotate.style[ _pfx("transformDelay") ] = (target.scale > current.scale ? "0" : "300ms");
90+
91+
current["x"] = target["x"];
92+
current["y"] = target["y"];
93+
current["rotate"] = target["rotate"];
94+
current["scale"] = target["scale"];
95+
}
96+
97+
document.addEventListener("keydown", function(event){
98+
if( event.keyCode == 32 || (event.keyCode >= 37 && event.keyCode <= 40) ) {
99+
var next = null;
100+
var active = document.querySelector(".step.active");
101+
switch( event.keyCode ) {
102+
case 37: ; // left
103+
case 38: // up
104+
next = steps.indexOf( active ) - 1;
105+
next = next >= 0 ? steps[ next ] : steps[ steps.length-1 ];
106+
break;
107+
case 32: ; // space
108+
case 39: ; // right
109+
case 40: // down
110+
next = steps.indexOf( active ) + 1;
111+
next = next < steps.length ? steps[ next ] : steps[ 0 ];
112+
break;
113+
}
114+
115+
select(next);
116+
117+
event.preventDefault();
118+
}
119+
}, false);
120+
121+
select(steps[0]);
122+
})();
123+

‎index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>impress.js | presentation framework based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz</title>
6+
7+
<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.">
8+
<meta name="author" content="Bartek Szopka" />
9+
10+
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|Crimson+Text:400,700,400italic" rel="stylesheet" />
11+
12+
<link href="impress.css" rel="stylesheet" />
13+
<link href="style.css" rel="stylesheet" />
14+
</head>
15+
<body>
16+
17+
<div id="impress">
18+
<div id="canvas" class="scale"><div class="rotate">
19+
20+
<div id="bored" class="step slide" data-x="-1000" data-y="-1000">
21+
<q>Aren't you just <b>bored</b> with all those slides-based presentations?</q>
22+
</div>
23+
24+
<div id="limits" class="step slide" data-x="0" data-y="-1000">
25+
<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>
26+
</div>
27+
28+
<div id="visualisation" class="step slide" data-x="1000" data-y="-1000">
29+
<q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q>
30+
</div>
31+
32+
<div id="title" class="step" data-x="0" data-y="0" data-scale="3">
33+
<span class="try">than you should try</span>
34+
<h1>impress.js<sup>*</sup></h1>
35+
<span class="footnote"><sup>*</sup> no rhyme intended</span>
36+
</div>
37+
38+
<div id="its" class="step" data-x="0" data-y="3000" data-rotate="90" data-scale="6">
39+
<p>It's a <strong>presentation framework</strong> <br/>
40+
inspired by the idea behind <a href="http://prezi.com">Prezi.com</a> <br/>
41+
and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p>
42+
</div>
43+
44+
45+
</div></div><!-- #canvas.scale > .rotate -->
46+
</div><!-- #impress -->
47+
48+
<script src="impress.js"></script>
49+
50+
</body>
51+
</html>

‎style.css‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
/* http://meyerweb.com/eric/tools/css/reset/
2+
v2.0 | 20110126
3+
License: none (public domain)
4+
*/
5+
6+
html, body, div, span, applet, object, iframe,
7+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8+
a, abbr, acronym, address, big, cite, code,
9+
del, dfn, em, img, ins, kbd, q, s, samp,
10+
small, strike, strong, sub, sup, tt, var,
11+
b, u, i, center,
12+
dl, dt, dd, ol, ul, li,
13+
fieldset, form, label, legend,
14+
table, caption, tbody, tfoot, thead, tr, th, td,
15+
article, aside, canvas, details, embed,
16+
figure, figcaption, footer, header, hgroup,
17+
menu, nav, output, ruby, section, summary,
18+
time, mark, audio, video {
19+
margin: 0;
20+
padding: 0;
21+
border: 0;
22+
font-size: 100%;
23+
font: inherit;
24+
vertical-align: baseline;
25+
}
26+
27+
/* HTML5 display-role reset for older browsers */
28+
article, aside, details, figcaption, figure,
29+
footer, header, hgroup, menu, nav, section {
30+
display: block;
31+
}
32+
body {
33+
line-height: 1;
34+
}
35+
ol, ul {
36+
list-style: none;
37+
}
38+
blockquote, q {
39+
quotes: none;
40+
}
41+
blockquote:before, blockquote:after,
42+
q:before, q:after {
43+
content: '';
44+
content: none;
45+
}
46+
47+
table {
48+
border-collapse: collapse;
49+
border-spacing: 0;
50+
}
51+
52+
53+
body {
54+
min-height: 740px;
55+
56+
background: rgb(215, 215, 215);
57+
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
58+
background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
59+
background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
60+
background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
61+
background: radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
62+
63+
-webkit-font-smoothing: antialiased;
64+
}
65+
66+
67+
.step {
68+
width: 900px;
69+
padding: 40px 60px;
70+
71+
-webkit-box-sizing: border-box;
72+
-moz-box-sizing: border-box;
73+
-o-box-sizing: border-box;
74+
box-sizing: border-box;
75+
76+
font-family: 'Crimson Text', georgia, times, serif;
77+
font-size: 32px;
78+
line-height: 42px;
79+
}
80+
81+
b, strong { font-weight: bold }
82+
83+
a { color: inherit; }
84+
85+
86+
/* step specific styles */
87+
88+
#title { padding: 0; }
89+
90+
#title .try {
91+
92+
font-size: 64px;
93+
line-height: 1.3;
94+
position: absolute;
95+
top: -0.5em;
96+
left: 1.5em;
97+
}
98+
99+
#title h1 {
100+
font-size: 190px;
101+
line-height: 250px;
102+
}
103+
104+
#its { font-size: 48px; line-height: 62px; }
105+
106+
107+
/*
108+
* Inspired by:
109+
* http://html5slides.googlecode.com/svn/trunk/styles.css
110+
*
111+
* ;)
112+
*/
113+
114+
.slide {
115+
display: block;
116+
117+
width: 900px;
118+
height: 700px;
119+
120+
padding: 40px 60px;
121+
122+
box-sizing: border-box;
123+
-o-box-sizing: border-box;
124+
-moz-box-sizing: border-box;
125+
-webkit-box-sizing: border-box;
126+
127+
border-radius: 10px;
128+
-o-border-radius: 10px;
129+
-moz-border-radius: 10px;
130+
-webkit-border-radius: 10px;
131+
132+
background-color: white;
133+
134+
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
135+
border: 1px solid rgba(0, 0, 0, .3);
136+
137+
transition: transform .3s ease-out;
138+
-o-transition: -o-transform .3s ease-out;
139+
-moz-transition: -moz-transform .3s ease-out;
140+
-webkit-transition: -webkit-transform .3s ease-out;
141+
142+
font-family: 'Open Sans', Arial, sans-serif;
143+
144+
color: rgb(102, 102, 102);
145+
text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
146+
147+
font-size: 30px;
148+
line-height: 36px;
149+
150+
letter-spacing: -1px;
151+
}
152+
153+
.slide q {
154+
display: block;
155+
font-size: 50px;
156+
line-height: 72px;
157+
158+
margin-top: 100px;
159+
}
160+
161+
.slide q strong {
162+
font-size: 65px;
163+
white-space: nowrap;
164+
}

0 commit comments

Comments
 (0)