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

impressive simplifications

Browse Source
This commit is contained in:
Bartek Szopka
2011-12-29 20:25:46 +01:00
parent 0b3555291b
commit 336f6c7704
2 changed files with 19 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@@ -13,8 +13,7 @@
</head> </head>
<body> <body>
<div id="impress"> <div id="impress"><div class="canvas">
<div id="canvas" class="scale"><div class="rotate">
<div id="bored" class="step slide" data-x="-1000" data-y="-1000"> <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> <q>Aren't you just <b>bored</b> with all those slides-based presentations?</q>
@@ -40,9 +39,7 @@
and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p> and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p>
</div> </div>
</div></div><!-- #impress .canvas -->
</div></div><!-- #canvas.scale > .rotate -->
</div><!-- #impress -->
<script src="js/impress.js"></script> <script src="js/impress.js"></script>

44
js/impress.js
View File

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