| <!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" /> |
| |
| <!-- |
| |
| Impress.js doesn't depend on any external stylesheet. Script adds all styles it needs for |
| presentation to work. |
| |
| This style below contains styles only for demo presentation. Browse it to see how impress.js |
| classes are used to style presentation steps, or how to apply fallback styles, but I don't want |
| you to use them directly in your presentation. |
| |
| Be creative, build your own. We don't really want all impress.js presentations to look the same, |
| do we? |
| |
| When creating your own presentation get rid of this file. Start from scratch, it's fun! |
| |
| --> |
| <link href="css/impress-demo.css" rel="stylesheet" /> |
| |
| <link rel="shortcut icon" href="favicon.png" /> |
| <link rel="apple-touch-icon" href="apple-touch-icon.png" /> |
| </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. |
| |
| --> |
| <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 exiting! 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> |
| |
| <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 |
| |
| --> |
| <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="js/impress.js"></script> |
| <script>impress().init();</script> |
| |
| <!-- |
| |
| The `impress()` function also gives you access to API to control 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( stepElement ) - moves the presentation to given step element (the DOM element of the step). |
| |
| 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! |
| |
| --> |
| |
