diff --git a/style.css b/css/style.css similarity index 100% rename from style.css rename to css/style.css diff --git a/impress.css b/impress.css deleted file mode 100644 index bcdd06a..0000000 --- a/impress.css +++ /dev/null @@ -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; -} - diff --git a/index.html b/index.html index 622d398..9ab3f7f 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,7 @@ - - + @@ -45,7 +44,7 @@ - + diff --git a/impress.js b/js/impress.js similarity index 82% rename from impress.js rename to js/impress.js index 51638cb..b69b0ae 100644 --- a/impress.js +++ b/js/impress.js @@ -27,15 +27,32 @@ })(); - var $ = function(s) { return document.querySelector(s) }; + var $ = function(s) { + return document.querySelector(s); + }; var $$ = function(selector){ return [].slice.call(document.querySelectorAll(selector)); - } + }; + + var impress = document.getElementById("impress"); var canvas = document.getElementById("canvas"); 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["y"] = "0"; canvas.dataset["rotate"] = "0"; @@ -57,10 +74,11 @@ step.rotate = step.rotate || 0; step.scale = step.scale || 1; + el.style["position"] = "absolute"; el.style[_pfx("transform")] = "translate(-50%,-50%)" + translate(step.x, step.y) + rotate(step.rotate) + - scale(step.scale) + scale(step.scale); }); @@ -72,7 +90,7 @@ } el.classList.add("active"); - document.getElementById("impress").className = "step-" + el.id; + impress.className = "step-" + el.id; var target = { rotate: -parseInt(step.rotate, 10),