| /* | |
| So you like the style of impress.js demo? | |
| Or maybe you are just curious how it was done? | |
| You couldn't find a better place to find out! | |
| Welcome to the stylesheet impress.js demo presentation. | |
| Please remember that it is not meant to be a part of impress.js and is | |
| not required by impress.js. | |
| I expect that anyone creating a presentation for impress.js would create | |
| their own set of styles. | |
| But feel free to read through it and learn how to get the most of what | |
| impress.js provides. | |
| And let me be your guide. | |
| Shall we begin? | |
| */ | |
| /* | |
| We start with a good ol' reset. | |
| That's the one by Eric Meyer http://meyerweb.com/eric/tools/css/reset/ | |
| You can probably argue if it is needed here, or not, but for sure it | |
| doesn't do any harm and gives us a fresh start. | |
| */ | |
| 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; | |
| } | |
| /* | |
| Now here is when interesting things start to appear. | |
| We set up <body> styles with default font and nice gradient in the background. | |
| And yes, there is a lot of repetition there because of -prefixes but we don't | |
| want to leave anybody behind. | |
| */ | |
| body { | |
| font-family: 'PT Sans', sans-serif; | |
| 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: -ms-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)); | |
| } | |
| /* | |
| Now let's bring some text styles back ... | |
| */ | |
| b, strong { font-weight: bold } | |
| i, em { font-style: italic } | |
| /* | |
| ... and give links a nice look. | |
| */ | |
| 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, | |
| a:focus { | |
| background: rgba(255,255,255,1); | |
| text-shadow: -1px -1px 2px rgba(100,100,100,0.5); | |
| } | |
| /* | |
| Because the main point behind the impress.js demo is to demo impress.js | |
| we display a fallback message for users with browsers that don't support | |
| all the features required by it. | |
| All of the content will be still fully accessible for them, but I want | |
| them to know that they are missing something - that's what the demo is | |
| about, isn't it? | |
| And then we hide the message, when support is detected in the browser. | |
| */ | |
| .fallback-message { | |
| font-family: sans-serif; | |
| line-height: 1.3; | |
| width: 780px; | |
| padding: 10px 10px 0; | |
| margin: 20px auto; | |
| border: 1px solid #E4C652; | |
| border-radius: 10px; | |
| background: #EEDC94; | |
| } | |
| .fallback-message p { | |
| margin-bottom: 10px; | |
| } | |
| .impress-supported .fallback-message { | |
| display: none; | |
| } | |
| /* | |
| Now let's style the presentation steps. | |
| We start with basics to make sure it displays correctly in everywhere ... | |
| */ | |
| .step { | |
| position: relative; | |
| width: 900px; | |
| padding: 40px; | |
| margin: 20px auto; | |
| -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; | |
| } | |
| /* | |
| ... and we enhance the styles for impress.js. | |
| Basically we remove the margin and make inactive steps a little bit transparent. | |
| */ | |
| .impress-enabled .step { | |
| margin: 0; | |
| opacity: 0.3; | |
| -webkit-transition: opacity 1s; | |
| -moz-transition: opacity 1s; | |
| -ms-transition: opacity 1s; | |
| -o-transition: opacity 1s; | |
| transition: opacity 1s; | |
| } | |
| .impress-enabled .step.active { opacity: 1 } | |
| /* | |
| These 'slide' step styles were heavily inspired by HTML5 Slides: | |
| http://html5slides.googlecode.com/svn/trunk/styles.css | |
| ;) | |
| They cover everything what you see on first three steps of the demo. | |
| */ | |
| .slide { | |
| display: block; | |
| width: 900px; | |
| height: 700px; | |
| padding: 40px 60px; | |
| background-color: white; | |
| border: 1px solid rgba(0, 0, 0, .3); | |
| border-radius: 10px; | |
| box-shadow: 0 2px 6px rgba(0, 0, 0, .1); | |
| color: rgb(102, 102, 102); | |
| text-shadow: 0 2px 2px rgba(0, 0, 0, .1); | |
| font-family: 'Open Sans', Arial, sans-serif; | |
| 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; | |
| } | |
| /* | |
| And now we start to style each step separately. | |
| I agree that this may be not the most efficient, object-oriented and | |
| scalable way of styling, but most of steps have quite a custom look | |
| and typography tricks here and there, so they had to be styled separately. | |
| First is the title step with a big <h1> (no room for padding) and some | |
| 3D positioning along Z axis. | |
| */ | |
| #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; | |
| } | |
| /* | |
| Second step is nothing special, just a text with a link, so it doesn't need | |
| any special styling. | |
| Let's move to 'big thoughts' with centered text and custom font sizes. | |
| */ | |
| #big { | |
| width: 600px; | |
| text-align: center; | |
| font-size: 60px; | |
| line-height: 1; | |
| } | |
| #big b { | |
| display: block; | |
| font-size: 250px; | |
| line-height: 250px; | |
| } | |
| #big .thoughts { | |
| font-size: 90px; | |
| line-height: 150px; | |
| } | |
| /* | |
| 'Tiny ideas' just need some tiny styling. | |
| */ | |
| #tiny { | |
| width: 500px; | |
| text-align: center; | |
| } | |
| /* | |
| This step has some animated text ... | |
| */ | |
| #ing { width: 500px } | |
| /* | |
| ... so we define display to `inline-block` to enable transforms and | |
| transition duration to 0.5s ... | |
| */ | |
| #ing b { | |
| display: inline-block; | |
| -webkit-transition: 0.5s; | |
| -moz-transition: 0.5s; | |
| -ms-transition: 0.5s; | |
| -o-transition: 0.5s; | |
| transition: 0.5s; | |
| } | |
| /* | |
| ... and we want 'positioning` word to move up a bit when the step gets | |
| `present` class ... | |
| */ | |
| #ing.present .positioning { | |
| -webkit-transform: translateY(-10px); | |
| -moz-transform: translateY(-10px); | |
| -ms-transform: translateY(-10px); | |
| -o-transform: translateY(-10px); | |
| transform: translateY(-10px); | |
| } | |
| /* | |
| ... 'rotating' to rotate a quarter of a second later ... | |
| */ | |
| #ing.present .rotating { | |
| -webkit-transform: rotate(-10deg); | |
| -moz-transform: rotate(-10deg); | |
| -ms-transform: rotate(-10deg); | |
| -o-transform: rotate(-10deg); | |
| transform: rotate(-10deg); | |
| -webkit-transition-delay: 0.25s; | |
| -moz-transition-delay: 0.25s; | |
| -ms-transition-delay: 0.25s; | |
| -o-transition-delay: 0.25s; | |
| transition-delay: 0.25s; | |
| } | |
| /* | |
| ... and 'scaling' to scale down after another quarter of a second. | |
| */ | |
| #ing.present .scaling { | |
| -webkit-transform: scale(0.7); | |
| -moz-transform: scale(0.7); | |
| -ms-transform: scale(0.7); | |
| -o-transform: scale(0.7); | |
| transform: scale(0.7); | |
| -webkit-transition-delay: 0.5s; | |
| -moz-transition-delay: 0.5s; | |
| -ms-transition-delay: 0.5s; | |
| -o-transition-delay: 0.5s; | |
| transition-delay: 0.5s; | |
| } | |
| /* | |
| The 'imagination' step is again some boring font-sizing. | |
| */ | |
| #imagination { | |
| width: 600px; | |
| } | |
| #imagination .imagination { | |
| font-size: 78px; | |
| } | |
| /* | |
| There is nothing really special about 'use the source, Luke' step, too, | |
| except maybe of the Yoda background. | |
| As you can see below I've 'hard-coded' it in data URL. | |
| That's not the best way to serve images, but because that's just this one | |
| I decided it will be OK to have it this way. | |
| Just make sure you don't blindly copy this approach. | |
| */ | |
| #source { | |
| width: 700px; | |
| padding-bottom: 300px; | |
| /* Yoda Icon :: Pixel Art from Star Wars http://www.pixeljoint.com/pixelart/1423.htm */ | |
| background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAEYCAMAAACwUBm+AAAAAXNSR0IArs4c6QAAAKtQTFRFsAAAvbWSLUUrLEQqY1s8UYJMqJ1vNTEgOiIdIzYhjIFVLhsXZ6lgSEIsP2U8JhcCVzMsSXZEgXdOO145XJdWOl03LzAYMk4vSXNExr+hwcuxRTs1Qmk+RW9Am49eFRANQz4pUoNMQWc+OSMDTz0wLBsCNVMxa2NBOyUDUoNNSnlEWo9VRGxAVzYFl6tXCggHbLNmMUIcHhwTXkk5f3VNRT8wUT8xAAAACQocRBWFFwAAAAF0Uk5TAEDm2GYAAAPCSURBVHja7d3JctNAFIZRMwRCCGEmzPM8z/D+T8bu/ptbXXJFdij5fMt2Wuo+2UgqxVmtttq5WVotLzBgwIABAwYMGDCn0qVqbo69psPqVpWx+1XG5iaavF8wYMCAAQMGDBgwi4DJ6Y6qkxB1HNlcN3a92gbR5P2CAQMGDBgwYMCAWSxMlrU+UY5yu2l9okfV4bAxUVbf7TJnAwMGDBgwYMCAAbMLMHeqbGR82Zy+VR1Ht81nVca6R+UdTLaU24Ruzd3qM/e4yjnAgAEDBgwYMGDA7AJMd1l/3NRdVGcj3eX/2WEhCmDGxnM7yqygu8XIPjJj8iN/MGDAgAEDBgwYMAuDGb8q0RGlLCHLv1t9qDKWn3vdNHVuEI6HPaxO9Jo3GDBgwIABAwYMmIXBdC9ShGgMk+XnkXUeuGcsP/e1+lhNnZsL/G5Vs3OAAQMGDBgwYMCAWSxMR3SzOmraG5atdy9wZKzb+vg16qyqe2FltbnAgAEDBgwYMGDALAxmTJSuN3WA76rnVca6GTnemGN1WoEBAwYMGDBgwIBZGMxUomy4+xO899V4LAg5Xnc2MGDAgAEDBgwYMGA218Wq+2K1LDqvY9xZu8zN8fICdM6btYABAwYMGDBgwIABMzfH0+pGU5afze2tXebmeAfVz+p8BQYMGDBgwIABAwbMPBzZ+oWmfJrln1273FhkbHzee9WWbw7AgAEDBgwYMGDALAKm43hcdctKgblcPamOhuXnXlY5Xs6bsW4FGyQCAwYMGDBgwIABswiYMceZKgvMo+h8mrHLTdn676rj+FEFoTtHd8MwOxEYMGDAgAEDBgyYRcBM5UhXqiymW3R3c9ARhWO/OmjqfjVZy+xEYMCAAQMGDBgwYBYG073OnCV0RFNhMhaOa9WfKmOB6XjHMN1tQmaAAQMGDBgwYMCA2VWY7vXjz1U4croAzgPztwIDBgwYMGDAgAEDZhswh035NBw59Dww3RgYMGDAgAEDBgwYMJuD6f4tXT7NUqfCdBvZLkxXdgQGDBgwYMCAAQNmt2DGj8WzwAfV/w7T/aq7mxwwYMCAAQMGDBgwuwqTOo7uTwTngflSzQ3TdaJvAwEDBgwYMGDAgAED5gSvgbyo5oHZ4Pc+gwEDBgwYMGDAgAEzhOm+5G0qTGaAAQMGDBgwYMCAAXNaMOcnls3tNwWm+zRzp54NDBgwYMCAAQMGDJh5YNL36k1TLuGvVq+qnKMbS5n7tulT9asCAwYMGDBgwIABA2ZumKuztLnjgQEDBgwYMGDAgNl5mH/4/ltKA6vBNAAAAABJRU5ErkJggg==); | |
| background-position: bottom right; | |
| background-repeat: no-repeat; | |
| } | |
| #source q { | |
| font-size: 60px; | |
| } | |
| /* | |
| And the "it's in 3D" step again brings some 3D typography - just for fun. | |
| Because we want to position <span> elements in 3D we set transform-style to | |
| `preserve-3d` on the paragraph. | |
| It is not needed by webkit browsers, but it is in Firefox. It's hard to say | |
| which behaviour is correct as 3D transforms spec is not very clear about it. | |
| */ | |
| #its-in-3d p { | |
| -webkit-transform-style: preserve-3d; | |
| -moz-transform-style: preserve-3d; /* Y U need this Firefox?! */ | |
| -ms-transform-style: preserve-3d; | |
| -o-transform-style: preserve-3d; | |
| transform-style: preserve-3d; | |
| } | |
| /* | |
| Below we position each word separately along Z axis and we want it to transition | |
| to default position in 0.5s when the step gets `present` class. | |
| Quite a simple idea, but lot's of styles and prefixes. | |
| */ | |
| #its-in-3d span, | |
| #its-in-3d b { | |
| display: inline-block; | |
| -webkit-transform: translateZ(40px); | |
| -moz-transform: translateZ(40px); | |
| -ms-transform: translateZ(40px); | |
| -o-transform: translateZ(40px); | |
| transform: translateZ(40px); | |
| -webkit-transition: 0.5s; | |
| -moz-transition: 0.5s; | |
| -ms-transition: 0.5s; | |
| -o-transition: 0.5s; | |
| transition: 0.5s; | |
| } | |
| #its-in-3d .have { | |
| -webkit-transform: translateZ(-40px); | |
| -moz-transform: translateZ(-40px); | |
| -ms-transform: translateZ(-40px); | |
| -o-transform: translateZ(-40px); | |
| transform: translateZ(-40px); | |
| } | |
| #its-in-3d .you { | |
| -webkit-transform: translateZ(20px); | |
| -moz-transform: translateZ(20px); | |
| -ms-transform: translateZ(20px); | |
| -o-transform: translateZ(20px); | |
| transform: translateZ(20px); | |
| } | |
| #its-in-3d .noticed { | |
| -webkit-transform: translateZ(-40px); | |
| -moz-transform: translateZ(-40px); | |
| -ms-transform: translateZ(-40px); | |
| -o-transform: translateZ(-40px); | |
| transform: translateZ(-40px); | |
| } | |
| #its-in-3d .its { | |
| -webkit-transform: translateZ(60px); | |
| -moz-transform: translateZ(60px); | |
| -ms-transform: translateZ(60px); | |
| -o-transform: translateZ(60px); | |
| transform: translateZ(60px); | |
| } | |
| #its-in-3d .in { | |
| -webkit-transform: translateZ(-10px); | |
| -moz-transform: translateZ(-10px); | |
| -ms-transform: translateZ(-10px); | |
| -o-transform: translateZ(-10px); | |
| transform: translateZ(-10px); | |
| } | |
| #its-in-3d .footnote { | |
| font-size: 32px; | |
| -webkit-transform: translateZ(-10px); | |
| -moz-transform: translateZ(-10px); | |
| -ms-transform: translateZ(-10px); | |
| -o-transform: translateZ(-10px); | |
| transform: translateZ(-10px); | |
| } | |
| #its-in-3d.present span, | |
| #its-in-3d.present b { | |
| -webkit-transform: translateZ(0px); | |
| -moz-transform: translateZ(0px); | |
| -ms-transform: translateZ(0px); | |
| -o-transform: translateZ(0px); | |
| transform: translateZ(0px); | |
| } | |
| /* | |
| The last step is an overview. | |
| There is no content in it, so we make sure it's not visible because we want | |
| to be able to click on other steps. | |
| */ | |
| #overview { display: none } | |
| /* | |
| We also make other steps visible and give them a pointer cursor using the | |
| `impress-on-` class. | |
| */ | |
| .impress-on-overview .step { | |
| opacity: 1; | |
| cursor: pointer; | |
| } | |
| /* | |
| Now, when we have all the steps styled let's give users a hint how to navigate | |
| around the presentation. | |
| The best way to do this would be to use JavaScript, show a delayed hint for a | |
| first time users, then hide it and store a status in cookie or localStorage... | |
| But I wanted to have some CSS fun and avoid additional scripting... | |
| Let me explain it first, so maybe the transition magic will be more readable | |
| when you read the code. | |
| First of all I wanted the hint to appear only when user is idle for a while. | |
| You can't detect the 'idle' state in CSS, but I delayed a appearing of the | |
| hint by 5s using transition-delay. | |
| You also can't detect in CSS if the user is a first-time visitor, so I had to | |
| make an assumption that I'll only show the hint on the first step. And when | |
| the step is changed hide the hint, because I can assume that user already | |
| knows how to navigate. | |
| To summarize it - hint is shown when the user is on the first step for longer | |
| than 5 seconds. | |
| The other problem I had was caused by the fact that I wanted the hint to fade | |
| in and out. It can be easily achieved by transitioning the opacity property. | |
| But that also meant that the hint was always on the screen, even if totally | |
| transparent. It covered part of the screen and you couldn't correctly clicked | |
| through it. | |
| Unfortunately you cannot transition between display `block` and `none` in pure | |
| CSS, so I needed a way to not only fade out the hint but also move it out of | |
| the screen. | |
| I solved this problem by positioning the hint below the bottom of the screen | |
| with CSS transform and moving it up to show it. But I also didn't want this move | |
| to be visible. I wanted the hint only to fade in and out visually, so I delayed | |
| the fade in transition, so it starts when the hint is already in its correct | |
| position on the screen. | |
| I know, it sounds complicated ... maybe it would be easier with the code? | |
| */ | |
| .hint { | |
| /* | |
| We hide the hint until presentation is started and from browsers not supporting | |
| impress.js, as they will have a linear scrollable view ... | |
| */ | |
| display: none; | |
| /* | |
| ... and give it some fixed position and nice styles. | |
| */ | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| bottom: 200px; | |
| background: rgba(0,0,0,0.5); | |
| color: #EEE; | |
| text-align: center; | |
| font-size: 50px; | |
| padding: 20px; | |
| z-index: 100; | |
| /* | |
| By default we don't want the hint to be visible, so we make it transparent ... | |
| */ | |
| opacity: 0; | |
| /* | |
| ... and position it below the bottom of the screen (relative to it's fixed position) | |
| */ | |
| -webkit-transform: translateY(400px); | |
| -moz-transform: translateY(400px); | |
| -ms-transform: translateY(400px); | |
| -o-transform: translateY(400px); | |
| transform: translateY(400px); | |
| /* | |
| Now let's imagine that the hint is visible and we want to fade it out and move out | |
| of the screen. | |
| So we define the transition on the opacity property with 1s duration and another | |
| transition on transform property delayed by 1s so it will happen after the fade out | |
| on opacity finished. | |
| This way user will not see the hint moving down. | |
| */ | |
| -webkit-transition: opacity 1s, -webkit-transform 0.5s 1s; | |
| -moz-transition: opacity 1s, -moz-transform 0.5s 1s; | |
| -ms-transition: opacity 1s, -ms-transform 0.5s 1s; | |
| -o-transition: opacity 1s, -o-transform 0.5s 1s; | |
| transition: opacity 1s, transform 0.5s 1s; | |
| } | |
| /* | |
| Now we 'enable' the hint when presentation is initialized ... | |
| */ | |
| .impress-enabled .hint { display: block } | |
| /* | |
| ... and we will show it when the first step (with id 'bored') is active. | |
| */ | |
| .impress-on-bored .hint { | |
| /* | |
| We remove the transparency and position the hint in its default fixed | |
| position. | |
| */ | |
| opacity: 1; | |
| -webkit-transform: translateY(0px); | |
| -moz-transform: translateY(0px); | |
| -ms-transform: translateY(0px); | |
| -o-transform: translateY(0px); | |
| transform: translateY(0px); | |
| /* | |
| Now for fade in transition we have the oposite situation from the one | |
| above. | |
| First after 4.5s delay we animate the transform property to move the hint | |
| into its correct position and after that we fade it in with opacity | |
| transition. | |
| */ | |
| -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s 4.5s; | |
| -moz-transition: opacity 1s 5s, -moz-transform 0.5s 4.5s; | |
| -ms-transition: opacity 1s 5s, -ms-transform 0.5s 4.5s; | |
| -o-transition: opacity 1s 5s, -o-transform 0.5s 4.5s; | |
| transition: opacity 1s 5s, transform 0.5s 4.5s; | |
| } | |
| /* | |
| And as the last thing there is a workaround for quite strange bug. | |
| It happens a lot in Chrome. I don't remember if I've seen it in Firefox. | |
| Sometimes the element positioned in 3D (especially when it's moved back | |
| along Z axis) is not clickable, because it falls 'behind' the <body> | |
| element. | |
| To prevent this, I decided to make <body> non clickable by setting | |
| pointer-events property to `none` value. | |
| Value if this property is inherited, so to make everything else clickable | |
| I bring it back on the #impress element. | |
| If you want to know more about `pointer-events` here are some docs: | |
| https://developer.mozilla.org/en/CSS/pointer-events | |
| There is one very important thing to notice about this workaround - it makes | |
| everything 'unclickable' except what's in #impress element. | |
| So use it wisely ... or don't use at all. | |
| */ | |
| .impress-enabled { pointer-events: none } | |
| .impress-enabled #impress { pointer-events: auto } | |
| /* | |
| There is one funny thing I just realized. | |
| Thanks to this workaround above everything except #impress element is invisible | |
| for click events. That means that the hint element is also not clickable. | |
| So basically all of this transforms and delayed transitions trickery was probably | |
| not needed at all... | |
| But it was fun to learn about it, wasn't it? | |
| */ | |
| /* | |
| That's all I have for you in this file. | |
| Thanks for reading. I hope you enjoyed it at least as much as I enjoyed writing it | |
| for you. | |
| */ |
| <!doctype html> | |
| <!-- | |
| Welcome to the light side of the source, young padawan. | |
| One step closer to learn something interesting you are... | |
| ____ | |
| _.' : `._ | |
| .-.'`. ; .'`.-. | |
| __ / : ___\ ; /___ ; \ __ | |
| ,'_ ""=-.:__;".-.";: :".-.":__;.-="" _`, | |
| :' `.t""=-.. '<@.`;_ ',@:` ..-=""j.' `; | |
| `:-.._J '-.-'L__ `-.-' L_..-;' | |
| "-.__ ; .-" "-. : __.-" | |
| L ' /.======.\ ' J | |
| "-. "__" .-" | |
| __.l"-:_JL_;-";.__ | |
| .-j/'.; ;"""" / .'\"-. | |
| .' /:`. "-.: .-" .'; `. | |
| .-" / ; "-. "-..-" .-" : "-. | |
| .+"-. : : "-.__.-" ;-._ \ | |
| ; \ `.; ; : : "+. ; | |
| : ; ; ; : ; : \: | |
| ; : ; : ;: ; : | |
| : \ ; : ; : ; / :: | |
| ; ; : ; : ; : ;: | |
| : : ; : ; : : ; : ; | |
| ;\ : ; : ; ; ; ; | |
| : `."-; : ; : ; / ; | |
| ; -: ; : ; : .-" : | |
| :\ \ : ; : \.-" : | |
| ;`. \ ; : ;.'_..-= / ; | |
| : "-. "-: ; :/." .' : | |
| \ \ : ;/ __ : | |
| \ .-`.\ /t-"" ":-+. : | |
| `. .-" `l __/ /`. : ; ; \ ; | |
| \ .-" .-"-.-" .' .'j \ / ;/ | |
| \ / .-" /. .'.' ;_:' ; | |
| :-""-.`./-.' / `.___.' | |
| \ `t ._ / | |
| "-.t-._:' | |
| --> | |
| <!-- | |
| So you'd like to know how to use impress.js? | |
| You've made the first, very important step - you're reading the source code. | |
| And that's how impress.js presentations are built - with HTML and CSS code. | |
| Believe me, you need quite decent HTML and CSS skills to be able to use impress.js effectively. | |
| And what is even more important, you need to be a designer, too, because there are no default | |
| styles for impress.js presentations, there is no default or automatic layout for them. | |
| You need to design and build it by hand. | |
| So... | |
| Would you still like to know how to use impress.js? | |
| --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=1024" /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <title>impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz</title> | |
| <meta name="description" content="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." /> | |
| <meta name="author" content="Bartek Szopka" /> | |
| <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="utterio.css" rel="stylesheet" /> | |
| </head> | |
| <!-- | |
| Body element is used by impress.js to set some useful class names, that will allow you to detect | |
| the support and state of the presentation in CSS or other scripts. | |
| First very useful class name is `impress-not-supported`. This class means, that browser doesn't | |
| support features required by impress.js, so you should apply some fallback styles in your CSS. | |
| It's not necessary to add it manually on this element. If the script detects that browser is not | |
| good enough it will add this class, but keeping it in HTML means that users without JavaScript | |
| will also get fallback styles. | |
| When impress.js script detects that browser supports all required features, this class name will | |
| be removed. | |
| The class name on body element also depends on currently active presentation step. More details about | |
| it can be found later, when `hint` element is being described. | |
| --> | |
| <body class="impress-not-supported"> | |
| <!-- | |
| For example this fallback message is only visible when there is `impress-not-supported` class on body. | |
| --> | |
| <div class="fallback-message"> | |
| <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p> | |
| <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p> | |
| </div> | |
| <!-- | |
| Now that's the core element used by impress.js. | |
| That's the wrapper for your presentation steps. In this element all the impress.js magic happens. | |
| It doesn't have to be a `<div>`. Only `id` is important here as that's how the script find it. | |
| You probably won't need it now, but there are some configuration options that can be set on this element. | |
| To change the duration of the transition between slides use `data-transition-duration="2000"` giving it | |
| a number of ms. It defaults to 1000 (1s). | |
| You can also control the perspective with `data-perspective="500"` giving it a number of pixels. | |
| It defaults to 1000. You can set it to 0 if you don't want any 3D effects. | |
| If you are willing to change this value make sure you understand how CSS perspective works: | |
| https://developer.mozilla.org/en/CSS/perspective | |
| But as I said, you won't need it for now, so don't worry - there are some simple but interesing things | |
| right around the corner of this tag ;) | |
| --> | |
| <div id="impress"> | |
| <!-- | |
| Here is where interesting thing start to happen. | |
| Each step of the presentation should be an element inside the `#impress` with a class name | |
| of `step`. These step elements are positioned, rotated and scaled by impress.js, and | |
| the 'camera' shows them on each step of the presentation. | |
| Positioning information is passed through data attributes. | |
| In the example below we only specify x and y position of the step element with `data-x="-1000"` | |
| and `data-y="-1500` attributes. This means that **the center** of the element (yes, the center) | |
| will be positioned in point x = -1000px and y = -1500px of the presentation 'canvas'. | |
| It will not be rotated or scaled. | |
| --> | |
| <div id="bored" class="step slide" data-x="-1000" data-y="-1500"> | |
| <q>Aren't you just <b>bored</b> with all those slides-based presentations?</q> | |
| </div> | |
| <!-- | |
| The `id` attribute of the step element is used to identify it in the URL, but it's optional. | |
| If it is not defined, it will get a default value of `step-N` where N is a number of slide. | |
| So in the example below it'll be `step-2`. | |
| The hash part of the url when this step is active will be `#/step-2`. | |
| You can also use `#step-2` in a link, to point directly to this particular step. | |
| Please note, that while `#/step-2` (with slash) would also work in a link it's not recommended. | |
| Using classic `id`-based links like `#step-2` makes these links usable also in fallback mode. | |
| --> | |
| <div class="step slide" data-x="0" data-y="-1500"> | |
| <q>Don't you think that presentations given <strong>in modern browsers</strong> shouldn't <strong>copy the limits</strong> of 'classic' slide decks?</q> | |
| </div> | |
| <div class="step slide" data-x="1000" data-y="-1500"> | |
| <q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q> | |
| </div> | |
| <!-- | |
| This is an example of step element being scaled. | |
| Again, we use a `data-` attribute, this time it's `data-scale="4"`, so it means that this | |
| element will be 4 times larger than the others. | |
| From presentation and transitions point of view it means, that it will have to be scaled | |
| down (4 times) to make it back to it's correct size. | |
| --> | |
| <div id="title" class="step" data-x="0" data-y="0" data-scale="4"> | |
| <span class="try">then you should try</span> | |
| <h1>impress.js<sup>*</sup></h1> | |
| <span class="footnote"><sup>*</sup> no rhyme intended</span> | |
| </div> | |
| <!-- | |
| This element introduces rotation. | |
| Notation shouldn't be a surprise. We use `data-rotate="90"` attribute, meaning that this | |
| element should be rotated by 90 degrees clockwise. | |
| --> | |
| <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5"> | |
| <p>It's a <strong>presentation tool</strong> <br/> | |
| inspired by the idea behind <a href="http://prezi.com">prezi.com</a> <br/> | |
| and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p> | |
| </div> | |
| <div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6"> | |
| <p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p> | |
| </div> | |
| <!-- | |
| And now it gets really exciting! We move into third dimension! | |
| Along with `data-x` and `data-y`, you can define the position on third (Z) axis, with | |
| `data-z`. In the example below we use `data-z="-3000"` meaning that element should be | |
| positioned far away from us (by 3000px). | |
| --> | |
| <div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1"> | |
| <p>and <b>tiny</b> ideas</p> | |
| </div> | |
| <!-- | |
| This step here doesn't introduce anything new when it comes to data attributes, but you | |
| should notice in the demo that some words of this text are being animated. | |
| It's a very basic CSS transition that is applied to the elements when this step element is | |
| reached. | |
| At the very beginning of the presentation all step elements are given the class of `future`. | |
| It means that they haven't been visited yet. | |
| When the presentation moves to given step `future` is changed to `present` class name. | |
| That's how animation on this step works - text moves when the step has `present` class. | |
| Finally when the step is left the `present` class is removed from the element and `past` | |
| class is added. | |
| So basically every step element has one of three classes: `future`, `present` and `past`. | |
| Only one current step has the `present` class. | |
| --> | |
| <div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6"> | |
| <p>by <b class="positioning">positioning</b>, <b class="rotating">rotating</b> and <b class="scaling">scaling</b> them on an infinite canvas</p> | |
| </div> | |
| <div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6"> | |
| <p>the only <b>limit</b> is your <b class="imagination">imagination</b></p> | |
| </div> | |
| <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4"> | |
| <p>want to know more?</p> | |
| <q><a href="http://github.com/bartaz/impress.js">use the source</a>, Luke!</q> | |
| </div> | |
| <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2"> | |
| <p>one more thing...</p> | |
| </div> | |
| <!-- | |
| And the last one shows full power and flexibility of impress.js. | |
| You can not only position element in 3D, but also rotate it around any axis. | |
| So this one here will get rotated by -40 degrees (40 degrees anticlockwise) around X axis and | |
| 10 degrees (clockwise) around Y axis. | |
| You can of course rotate it around Z axis with `data-rotate-z` - it has exactly the same effect | |
| as `data-rotate` (these two are basically aliases). | |
| --> | |
| <div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2"> | |
| <p><span class="have">have</span> <span class="you">you</span> <span class="noticed">noticed</span> <span class="its">it's</span> <span class="in">in</span> <b>3D<sup>*</sup></b>?</p> | |
| <span class="footnote">* beat that, prezi ;)</span> | |
| </div> | |
| <!-- | |
| So to make a summary of all the possible attributes used to position presentation steps, we have: | |
| * `data-x`, `data-y`, `data-z` - they define the position of **the center** of step element on | |
| the canvas in pixels; their default value is 0; | |
| * `data-rotate-x`, `data-rotate-y`, 'data-rotate-z`, `data-rotate` - they define the rotation of | |
| the element around given axis in degrees; their default value is 0; `data-rotate` and `data-rotate-z` | |
| are exactly the same; | |
| * `data-scale` - defines the scale of step element; default value is 1 | |
| These values are used by impress.js in CSS transformation functions, so for more information consult | |
| CSS transfrom docs: https://developer.mozilla.org/en/CSS/transform | |
| --> | |
| <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10"> | |
| </div> | |
| </div> | |
| <!-- | |
| Hint is not related to impress.js in any way. | |
| But it can show you how to use impress.js features in creative way. | |
| When the presentation step is shown (selected) its element gets the class of "active" and the body element | |
| gets the class based on active step id `impress-on-ID` (where ID is the step's id)... It may not be | |
| so clear because of all these "ids" in previous sentence, so for example when the first step (the one with | |
| the id of `bored`) is active, body element gets a class of `impress-on-bored`. | |
| This class is used by this hint below. Check CSS file to see how it's shown with delayed CSS animation when | |
| the first step of presentation is visible for a couple of seconds. | |
| ... | |
| And when it comes to this piece of JavaScript below ... kids, don't do this at home ;) | |
| It's just a quick and dirty workaround to get different hint text for touch devices. | |
| In a real world it should be at least placed in separate JS file ... and the touch content should be | |
| probably just hidden somewhere in HTML - not hard-coded in the script. | |
| Just sayin' ;) | |
| --> | |
| <div class="hint"> | |
| <p>Use a spacebar or arrow keys to navigate</p> | |
| </div> | |
| <script> | |
| if ("ontouchstart" in document.documentElement) { | |
| document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>"; | |
| } | |
| </script> | |
| <!-- | |
| Last, but not least. | |
| To make all described above really work, you need to include impress.js in the page. | |
| I strongly encourage to minify it first. | |
| In here I just include full source of the script to make it more readable. | |
| You also need to call a `impress().init()` function to initialize impress.js presentation. | |
| And you should do it in the end of your document. Not only because it's a good practice, but also | |
| because it should be done when the whole document is ready. | |
| Of course you can wrap it in any kind of "DOM ready" event, but I was too lazy to do so ;) | |
| --> | |
| <script src="http://www.utter.io/js/impress.js"></script> | |
| <script>impress().init();</script> | |
| <!-- | |
| The `impress()` function also gives you access to the API that controls the presentation. | |
| Just store the result of the call: | |
| var api = impress(); | |
| and you will get three functions you can call: | |
| `api.init()` - initializes the presentation, | |
| `api.next()` - moves to next step of the presentation, | |
| `api.prev()` - moves to previous step of the presentation, | |
| `api.goto( idx | id | element, [duration] )` - moves the presentation to the step given by its index number | |
| id or the DOM element; second parameter can be used to define duration of the transition in ms, | |
| but it's optional - if not provided default transition duration for the presentation will be used. | |
| You can also simply call `impress()` again to get the API, so `impress().next()` is also allowed. | |
| Don't worry, it wont initialize the presentation again. | |
| For some example uses of this API check the last part of the source of impress.js where the API | |
| is used in event handlers. | |
| --> | |
| </body> | |
| </html> | |
| <!-- | |
| Now you know more or less everything you need to build your first impress.js presentation, but before | |
| you start... | |
| Oh, you've already cloned the code from GitHub? | |
| You have it open in text editor? | |
| Stop right there! | |
| That's not how you create awesome presentations. This is only a code. Implementation of the idea that | |
| first needs to grow in your mind. | |
| So if you want to build great presentation take a pencil and piece of paper. And turn off the computer. | |
| Sketch, draw and write. Brainstorm your ideas on a paper. Try to build a mind-map of what you'd like | |
| to present. It will get you closer and closer to the layout you'll build later with impress.js. | |
| Get back to the code only when you have your presentation ready on a paper. It doesn't make sense to do | |
| it earlier, because you'll only waste your time fighting with positioning of useless points. | |
| If you think I'm crazy, please put your hands on a book called "Presentation Zen". It's all about | |
| creating awesome and engaging presentations. | |
| Think about it. 'Cause impress.js may not help you, if you have nothing interesting to say. | |
| --> | |
| <!-- | |
| Are you still reading this? | |
| For real? | |
| I'm impressed! Feel free to let me know that you got that far (I'm @bartaz on Twitter), 'cause I'd like | |
| to congratulate you personally :) | |
| But you don't have to do it now. Take my advice and take some time off. Make yourself a cup of coffee, tea, | |
| or anything you like to drink. And raise a glass for me ;) | |
| Cheers! | |
| --> |
This is a nice description of the presentation.
Here's a really important image to go along with my really important topic.
Here's some example code for good measure.
// this is some sample code
alert("foobar");
