janishutz-legacy/impress.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

impress.css is now moved to impress.js

Browse Source
This commit is contained in:
Bartek Szopka
2011-12-29 15:36:02 +01:00
parent b15963042e
commit 24e4056e7f
4 changed files with 24 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
style.css → css/style.css
View File

50
impress.css
View File

@@ -1,50 +0,0 @@
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;
}

5
index.html
View File

@@ -9,8 +9,7 @@
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|Crimson+Text:400,700,400italic" rel="stylesheet" /> <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="css/style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head> </head>
<body> <body>
@@ -45,7 +44,7 @@
</div></div><!-- #canvas.scale > .rotate --> </div></div><!-- #canvas.scale > .rotate -->
</div><!-- #impress --> </div><!-- #impress -->
<script src="impress.js"></script> <script src="js/impress.js"></script>
</body> </body>
</html> </html>

26
impress.js → js/impress.js
View File

@@ -27,15 +27,32 @@
})(); })();
var $ = function(s) { return document.querySelector(s) }; var $ = function(s) {
return document.querySelector(s);
};
var $$ = function(selector){ var $$ = function(selector){
return [].slice.call(document.querySelectorAll(selector)); return [].slice.call(document.querySelectorAll(selector));
} };
var impress = document.getElementById("impress");
var canvas = document.getElementById("canvas"); var canvas = document.getElementById("canvas");
canvas.rotate = canvas.querySelector(".rotate"); canvas.rotate = canvas.querySelector(".rotate");
document.documentElement.style.height = "100%";
document.body.style.height = "100%";
document.body.style.overflow = "hidden";
impress.style.position = "absolute";
impress.style.top = "50%";
impress.style.left = "50%";
canvas.style["position"] = canvas.rotate.style["position"] = "absolute";
canvas.style[_pfx("transformOrigin")] = canvas.rotate.style[_pfx("transformOrigin")] = "top left";
canvas.style[_pfx("transition")] = canvas.rotate.style[_pfx("transition")] = "all 1s ease-in-out";
canvas.dataset["x"] = "0"; canvas.dataset["x"] = "0";
canvas.dataset["y"] = "0"; canvas.dataset["y"] = "0";
canvas.dataset["rotate"] = "0"; canvas.dataset["rotate"] = "0";
@@ -57,10 +74,11 @@
step.rotate = step.rotate || 0; step.rotate = step.rotate || 0;
step.scale = step.scale || 1; step.scale = step.scale || 1;
el.style["position"] = "absolute";
el.style[_pfx("transform")] = "translate(-50%,-50%)" + el.style[_pfx("transform")] = "translate(-50%,-50%)" +
translate(step.x, step.y) + translate(step.x, step.y) +
rotate(step.rotate) + rotate(step.rotate) +
scale(step.scale) scale(step.scale);
}); });
@@ -72,7 +90,7 @@
} }
el.classList.add("active"); el.classList.add("active");
document.getElementById("impress").className = "step-" + el.id; impress.className = "step-" + el.id;
var target = { var target = {
rotate: -parseInt(step.rotate, 10), rotate: -parseInt(step.rotate, 10),