more work on presentation

parent 3f523a8e
This diff is collapsed.
......@@ -20,37 +20,15 @@
<body class="impress-not-supported">
<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>
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:
But as I said, you won't need it for now, so don't worry - there are some simple but interesting things
right around the corner of this tag ;)
<div id="impress">
<div id="title" class="step slide" data-x="-1000" data-y="-1500">
<h2>We are sounds in the Universe</h2>
<div id="title" class="step" data-x="-1000" data-y="-1500">
<span class="grains">Grains</span>
<span class="sounds">We are sounds</span>
<span class="universe">in the universe</span>
<li>Dragica Kahlina (@gluggergames)</li>
<li>Jens-Christian Fischer (@jcfischer)</li>
......@@ -89,92 +67,51 @@
<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>
<h1>Sound Synthesis</h1>
<div class="step slide" data-x="1000" data-y="-1500" data-z="-1000">
<h1>Subtractive Synthesis</h1>
<q>Start with a sound with lots of harmonic contents, then shape and filter it<q>
<div class="step slide" data-x="1000" data-y="-1500" data-z="-2000">
This is an example of step element being scaled.
<h1>Additive Synthesis</h1>
<q>Start with a sine wave and add more (harmonic) sine waves on top of it</q>
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 its correct size.
<div id="xtitle" class="step" data-x="0" data-y="0" data-scale="4">
<span class="try">then you should try</span>
<span class="footnote"><sup>*</sup> no rhyme intended</span>
<h1>Granular synthesis</h1>
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=""></a> <br/>
and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p>
<h1>Audience Participation</h1>
<p>Let's experiment with <b>granular synthesis</b></p>
<p>Each one of you will be <b>control</b> one <i>grain</i> and be part of the sound</p>
<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>
<li>Elixir / Erlang / Phoenix</li>
<li>Open Sound Control (OSC)</li>
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>
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
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>
<q>Go to</q>
<p><a href=""></a>
<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 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="">use the source</a>, Luke!</q>
<div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
<p>one more thing...</p>
......@@ -213,38 +150,6 @@
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>
if ("ontouchstart" in document.documentElement) {
document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment