Presentation for Internet course

impress.js

/**
 * impress.js
 *
 * impress.js is a presentation tool based on the power of CSS3 transforms and transitions
 * in modern browsers and inspired by the idea behind prezi.com.
 *
 * MIT Licensed.
 *
 * Copyright 2011 Bartek Szopka (@bartaz)
 */

(function ( document, window ) {

    // HELPER FUNCTIONS
    
    var pfx = (function () {

        var style = document.createElement('dummy').style,
            prefixes = 'Webkit Moz O ms Khtml'.split(' '),
            memory = {};
            
        return function ( prop ) {
            if ( typeof memory[ prop ] === "undefined" ) {

                var ucProp  = prop.charAt(0).toUpperCase() + prop.substr(1),
                    props   = (prop + ' ' + prefixes.join(ucProp + ' ') + ucProp).split(' ');

                memory[ prop ] = null;
                for ( var i in props ) {
                    if ( style[ props[i] ] !== undefined ) {
                        memory[ prop ] = props[i];
                        break;
                    }
                }

            }

            return memory[ prop ];
        }

    })();

    var arrayify = function ( a ) {
        return [].slice.call( a );
    };
    
    var css = function ( el, props ) {
        var key, pkey;
        for ( key in props ) {
            if ( props.hasOwnProperty(key) ) {
                pkey = pfx(key);
                if ( pkey != null ) {
                    el.style[pkey] = props[key];
                }
            }
        }
        return el;
    }
    
    var $ = function ( selector, context ) {
        context = context || document;
        return context.querySelector(selector);
    };
    
    var $$ = function ( selector, context ) {
        context = context || document;
        return arrayify( context.querySelectorAll(selector) );
    };
    
    var translate = function ( t ) {
        return " translate3d(" + t.x + "px," + t.y + "px," + t.z + "px) ";
    };
    
    var rotate = function ( r, revert ) {
        var rX = " rotateX(" + r.x + "deg) ",
            rY = " rotateY(" + r.y + "deg) ",
            rZ = " rotatez(" + r.z + "deg) ";
        
        return revert ? rZ+rY+rX : rX+rY+rZ;
    };
    
    var scale = function ( s ) {
        return " scaleX(" + s.x + ") scaleY(" + s.y + ") scaleZ(" + s.z + ") ";
    }
    
    // CHECK SUPPORT
    
    var impressSupported = (pfx("perspective") != null);
    
    // DOM ELEMENTS
    
    var impress = document.getElementById("impress");
    
    if (!impressSupported) {
        impress.className = "impress-not-supported";
        return;
    } else {
        impress.className = "";
    }
    
    var canvas = document.createElement("div");
    canvas.className = "canvas";
    
    arrayify( impress.childNodes ).forEach(function ( el ) {
        canvas.appendChild( el );
    });
    impress.appendChild(canvas);
    
    var steps = $$(".step", impress);
    
    // SETUP
    // set initial values and defaults
    
    document.documentElement.style.height = "100%";
    
    css(document.body, {
        height: "100%",
        overflow: "hidden"
    });

    var props = {
        position: "absolute",
        transformOrigin: "top left",
        transition: "all 1s ease-in-out",
        transformStyle: "preserve-3d"
    }
    
    css(impress, props);
    css(impress, {
        top: "50%",
        left: "50%",
        perspective: "1000px"
    });
    css(canvas, props);
    
    var current = {
        translate: { x: 0, y: 0, z: 0 },
        rotate:    { x: 0, y: 0, z: 0 },
        scale:     { x: 1, y: 1, z: 1 }
    };

    steps.forEach(function ( el, idx ) {
        var data = el.dataset,
            step = {
                translate: {
                    x: data.x || 0,
                    y: data.y || 0,
                    z: data.z || 0
                },
                rotate: {
                    x: data.rotateX || 0,
                    y: data.rotateY || 0,
                    z: data.rotateZ || data.rotate || 0
                },
                scale: {
                    x: data.scaleX || data.scale || 1,
                    y: data.scaleY || data.scale || 1,
                    z: data.scaleZ || 1
                }
            };
        
        el.stepData = step;
        
        if ( !el.id ) {
            el.id = "step-" + idx;
        }
        
        css(el, {
            position: "absolute",
            transform: "translate(-50%,-50%)" +
                       translate(step.translate) +
                       rotate(step.rotate) +
                       scale(step.scale),
            transformStyle: "preserve-3d"
        });
        
    });

    // making given step active

    var select = function ( el ) {
        var step = el.stepData;

        if ( $(".step.active", impress) ) {
            $(".step.active", impress).classList.remove("active");
        }
        el.classList.add("active");

        impress.className = "step-" + el.id;
        
        var target = {
            rotate: {
                x: -parseInt(step.rotate.x, 10),
                y: -parseInt(step.rotate.y, 10),
                z: -parseInt(step.rotate.z, 10),
            },
            scale: {
                x: 1 / parseFloat(step.scale.x),
                y: 1 / parseFloat(step.scale.y),
                z: 1 / parseFloat(step.scale.z),
            },
            translate: {
                x: -step.translate.x,
                y: -step.translate.y,
                z: -step.translate.z
            }
        };

        var zoomin = target.scale.x >= current.scale.x;
        
        css(impress, {
            transform: scale(target.scale),
            transitionDelay: (zoomin ? "500ms" : "0ms")
        });
        
        css(canvas, {
            transform: rotate(target.rotate, true) + translate(target.translate),
            transitionDelay: (zoomin ? "0ms" : "500ms")
        });
        
        current = target;
    }
    
    // EVENTS
    
    document.addEventListener("keydown", function ( event ) {
        if ( event.keyCode == 9 || event.keyCode == 32 || (event.keyCode >= 37 && event.keyCode <= 40) ) {
            var active = $(".step.active", impress);
            var next = active;
            switch( event.keyCode ) {
                case 37: ; // left
                case 38:   // up
                         next = steps.indexOf( active ) - 1;
                         next = next >= 0 ? steps[ next ] : steps[ steps.length-1 ];
                         break;
                case 9:  ; // tab
                case 32: ; // space
                case 39: ; // right
                case 40:   // down
                         next = steps.indexOf( active ) + 1;
                         next = next < steps.length ? steps[ next ] : steps[ 0 ];
                         break; 
            }
            
            select(next);
            
            event.preventDefault();
        }
    }, false);
    
    // Sometimes it's possible to trigger focus on first link with some keyboard action.
    // Browser in such a case tries to scroll the page to make this element visible
    // (even that body overflow is set to hidden) and it breaks our careful positioning.
    //
    // So, as a lousy (and lazy) workaround any scroll event will make the page scroll back to the top.
    //
    // If you are reading this and know any better way to handle it, I'll be glad to hear about it!
    window.addEventListener("scroll", function ( event ) {
        window.scrollTo(0, 0);
    }, false);
    
    // START 
    // by selecting first step of presentation
    select(steps[0]);

})(document, window);

index.html

<!doctype html>
<html lang="en">
	<head>
	   <meta charset="utf-8" />
		<title>Front End development tools</title>
		<meta name="author" content="Yotam Katznelson" />

		<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />

		<link href="style.css" rel="stylesheet" />
	</head>
	<body>


	<div id="impress" class="impress-not-supported">

		<div class="fallback-message">
			<p>Your browser <b>doesn't support features required</b> by impress.js, so are presented with simplified version of this presentation.</p>
			<p>For the best experience please use latest <b>Chrome</b> or <b>Safari</b> browser. Firefox 10 and Internet Explorer 10 <i>should</i> also handle it.</p>
		</div>

		<div class="step slide" id="open" data-x="-1000" data-y="-1500">
			<q><b><u>Front End development tools</u></b> <br/>What you never knew and what you never wanted to know</q>
		</div>

		<div class="step slide" id="firebug" data-x="0" data-y="-1500">
			<q><h3><strong><u>Firebug</u><strong></h3></q><br/>
			<img id="firebugImg" src="http://img.clubic.com/04442696-photo-firebug.jpg" width="400" height="400"></img>
		</div>

		<div class="step slide" id="github" data-x="1000" data-y="-1500" data-rotate-y="40">
			<q><h3><strong><u>Github</u><strong></h3><br/>
			<a href="http://www.github.com" target="_blank"><img id="githubImg" src="http://www.dockstreetmedia.com/wp-content/uploads/2012/08/githuboctacat.jpg" width="650" height="320"></a>
		</div>
		
		<div class="step slide" id="d3js" data-x="0" data-y="0" data-rotate="90">
			<q><h3><strong><u>D3.js</u></strong></h3></q><br/>
			<a href="http://www.d3js.org" target="_blank"><img id="d3Img" src="http://www.webresourcesdepot.com/wp-content/uploads/d3-word-cloud.gif" width="650" height="320"></a>
		</div>
		
		<div class="step slide" id="jason" data-x="0" data-y="1000" data-rotate="90">
			<q><h3><strong><u>Example #1 - Coffee Wheel</u></strong></h3></q><br/>
			<a href="http://www.jasondavies.com/coffee-wheel/" target="_blank"><img id="jasonImg" src="http://consciouscup.files.wordpress.com/2011/07/coffee_tasting_flavor_wheel1.jpg" width="650" height="450"></a>
		</div>
		
		<div class="step slide" id="network" data-x="0" data-y="1000" data-z="-1000" data-rotate="90" data-rotate-y="90">
			<q><h3><strong><u>Example #2 - Linked Jazz</u></strong></h3></q><br/>
			<iframe id="frameNetwork" height="1000" width="1400" frameBorder="0" src="http://linkedjazz.org/network/"></iframe>
		</div>
		
		<div class="step slide" id="ex1" data-x="0" data-y="2000" data-z="-1000" data-rotate="90" data-rotate-y="90">
			<q><h3><strong><u>Example #3 - ex1</u></strong></h3></q><br/>
			<iframe id="frameEx" height="1200" width="1400" frameBorder="0" src="http://bl.ocks.org/d/4068554/"></iframe>
		</div>
		
		<div class="step slide" id="tributary" data-x="-1000" data-y="3000" data-z="-1000" data-rotate="90" data-rotate-y="90">
			<q><h3><strong><u>Live Coding - Tributary</u></strong></h3></q><br/>
			<iframe id="frameTrib" height="850" width="1400" frameBorder="0" src="http://enjalot.com/tributary/"></iframe>
		</div>
		
		<div class="step slide" id="tribExample" data-x="-1000" data-y="4000" data-z="-1000" data-rotate-y="90" data-rotate-z="90">
			<q><h3><strong><u>Tributary - Example</u></strong></h3></q><br/>
			<iframe id="frameTrib" height="850" width="1400" frameBorder="0" src="http://enjalot.com/tributary/3970409/"></iframe>
		</div>
		
		<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
		</div>

	</div>

	<script src="impress.js"></script>

	</body>
</html>

style.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


body {
    min-height: 740px;

    background: rgb(215, 215, 215);
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
    background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
    background:    -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
    background:      -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
    background:         radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));

    -webkit-font-smoothing: antialiased;
}

b, strong { font-weight: bold }
i, em { font-style: italic}

a {
    color: inherit;
    text-decoration: none;
    padding: 0 0.1em;
    background: rgba(255,255,255,0.5);
    text-shadow: -1px -1px 2px rgba(100,100,100,0.9);
    border-radius: 0.2em;
    
    -webkit-transition: 0.5s;
    -moz-transition:    0.5s;
    -ms-transition:     0.5s;
    -o-transition:      0.5s;
    transition:         0.5s;
}

a:hover {
    background: rgba(255,255,255,1);
    text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
}

/* COMMON STEP STYLES */

.step {
    width: 900px;
    padding: 40px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    -ms-box-sizing:     border-box;
    -o-box-sizing:      border-box;
    box-sizing:         border-box;

    font-family: 'PT Serif', georgia, serif;

    font-size: 48px;
    line-height: 1.5;
}

/* fade out inactive slides */

.step {
    -webkit-transition: opacity 1s;
    -moz-transition:    opacity 1s;
    -ms-transition:     opacity 1s;
    -o-transition:      opacity 1s;
    transition:         opacity 1s;
}

.step:not(.active) {
    opacity: 0.3;
}

/* STEP SPECIFIC STYLES */

/* impress.js title */

#title {
    padding: 0;
}

#title .try {
    font-size: 64px;
    position: absolute;
    top: -0.5em;
    left: 1.5em;
    
    -webkit-transform: translateZ(20px);
    -moz-transform:    translateZ(20px);
    -ms-transform:     translateZ(20px);
    -o-transform:      translateZ(20px);
    transform:         translateZ(20px);
}

#title h1 {
    font-size: 190px;
    
    -webkit-transform: translateZ(50px);
    -moz-transform:    translateZ(50px);
    -ms-transform:     translateZ(50px);
    -o-transform:      translateZ(50px);
    transform:         translateZ(50px);
}

#title .footnote {
    font-size: 32px;
}

/* overview step */

#overview {
    z-index: -1;
}

/* on overview step everything is visible */

#impress.step-overview .step {
    opacity: 1;
}


/*
 * SLIDE STEP STYLES
 *
 * inspired by: http://html5slides.googlecode.com/svn/trunk/styles.css
 *
 * ;)
 */

.slide {
    display: block;

    width: 900px;
    height: 700px;

    padding: 40px 60px;

    border-radius: 10px;

    background-color: white;

    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    border: 1px solid rgba(0, 0, 0, .3);

    font-family: 'Open Sans', Arial, sans-serif;

    color: rgb(102, 102, 102);
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
	text-align: center;
	
    font-size: 30px;
    line-height: 36px;

    letter-spacing: -1px;
}

.slide q {
    display: block;
    font-size: 50px;
    line-height: 72px;

    margin-top: 100px;
}

.slide q strong {
    white-space: nowrap;
}


/* IMPRESS NOT SUPPORTED STYLES */

.fallback-message {
    font-family: sans-serif;
    line-height: 1.3;
    
    display: none;
    width: 780px;
    padding: 10px 10px 0;
    margin: 20px auto;

    border-radius: 10px;
    border: 1px solid #E4C652;
    background: #EEDC94;
}

.fallback-message p {
    margin-bottom: 10px;
}

.impress-not-supported .step {
    position: relative;
    opacity: 1;
    margin: 20px auto;
}

.impress-not-supported .fallback-message {
    display: block;
}

#open {
	text-align: center;

}

#firebug  q{
	display: block;
    font-size: 50px;
    line-height: 72px;

    margin-top: 30px;
}

#github  q{
	display: block;
    font-size: 50px;
    line-height: 72px;

    margin-top: 30px;
}

#d3js  q{
	display: block;
    font-size: 50px;
    line-height: 72px;

    margin-top: 30px;
}

#frameNetwork {
    zoom: 0.75;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0;
}

#frameEx {
    zoom: 0.75;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0;
}

#frameTrib {
    zoom: 0.75;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0;
}


#firbug  h3{
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	text-decoration: underline;
}

#jason  q{
	display: block;
    font-size: 50px;
    line-height: 72px;

    margin-top: 30px;
}

#network  q{
	display: block;
    font-size: 50px;
    line-height: 72px;

    margin-top: 30px;
}

#ex1  q{
	display: block;
    font-size: 50px;
    line-height: 72px;

    margin-top: 30px;
}

#tributary  q{
	display: block;
    font-size: 50px;
    line-height: 72px;

    margin-top: 30px;

}

#tribExample  q{
	display: block;
    font-size: 50px;
    line-height: 72px;

    margin-top: 30px;
}