From 336f6c7704031b7230e98d8ff1eac1041ba0e283 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Thu, 29 Dec 2011 20:25:46 +0100 Subject: [PATCH] impressive simplifications --- index.html | 7 ++----- js/impress.js | 50 +++++++++++++++++--------------------------------- 2 files changed, 19 insertions(+), 38 deletions(-) diff --git a/index.html b/index.html index 9ab3f7f..74fdd7f 100644 --- a/index.html +++ b/index.html @@ -13,8 +13,7 @@ -
-
+
Aren't you just bored with all those slides-based presentations? @@ -40,9 +39,7 @@ and based on the power of CSS3 transforms and transitions in modern browsers.

- -
-
+
diff --git a/js/impress.js b/js/impress.js index dbd54a1..9bb54f6 100644 --- a/js/impress.js +++ b/js/impress.js @@ -29,22 +29,14 @@ })(); - var extend = function ( dst, src ) { - var key; - for ( key in src ) { - if ( src.hasOwnProperty(key) ) { - dst[key] = src[key]; - } - } - return dst; - } - var css = function ( el, props ) { var key, pkey; for ( key in props ) { - pkey = pfx(key); - if ( pkey != null ) { - el.style[pkey] = props[key]; + if ( props.hasOwnProperty(key) ) { + pkey = pfx(key); + if ( pkey != null ) { + el.style[pkey] = props[key]; + } } } return el; @@ -67,9 +59,7 @@ // DOM ELEMENTS var impress = document.getElementById("impress"); - var canvas = document.getElementById("canvas"); - - canvas.rotate = canvas.querySelector(".rotate"); + var canvas = $(".canvas", impress); var steps = $$(".step", impress); @@ -83,29 +73,23 @@ overflow: "hidden" }); - css(impress, { - position: "absolute", - top: "50%", - left: "50%" - }); - var props = { position: "absolute", + top: "50%", + left: "50%", transformOrigin: "top left", transition: "all 1s ease-in-out" } + css(impress, props); css(canvas, props); - css(canvas.rotate, props); - extend(canvas.dataset, { + var current = { x: 0, y: 0, rotate: 0, scale: 1 - }); - - var current = canvas.dataset; + }; steps.forEach(function ( el, idx ) { var step = el.dataset; @@ -134,8 +118,8 @@ var select = function ( el ) { var step = el.dataset; - if ( $(".step.active", canvas) ) { - $(".step.active", canvas).classList.remove("active"); + if ( $(".step.active", impress) ) { + $(".step.active", impress).classList.remove("active"); } el.classList.add("active"); @@ -148,17 +132,17 @@ y: -step.y }; - css(canvas, { + css(impress, { transform: scale(target.scale), transitionDelay: (target.scale > current.scale ? "300ms" : "0") }); - css(canvas.rotate, { + css(canvas, { transform: rotate(target.rotate) + translate(target.x, target.y), transformDelay: (target.scale > current.scale ? "0" : "300ms") }); - extend(current, target); + current = target; } // EVENTS @@ -166,7 +150,7 @@ document.addEventListener("keydown", function ( event ) { if( event.keyCode == 32 || (event.keyCode >= 37 && event.keyCode <= 40) ) { var next = null; - var active = $(".step.active", canvas); + var active = $(".step.active", impress); switch( event.keyCode ) { case 37: ; // left case 38: // up