Top
Impress.js – Folienaufbau – RonnyDee´s Blog
fade
4543
post-template-default,single,single-post,postid-4543,single-format-standard,eltd-core-1.1.1,flow child-child-ver-1.0.0,flow-ver-1.3.7,,eltd-smooth-page-transitions,ajax,eltd-blog-installed,page-template-blog-standard,eltd-header-standard,eltd-fixed-on-scroll,eltd-default-mobile-header,eltd-sticky-up-mobile-header,eltd-dropdown-default,wpb-js-composer js-comp-ver-5.2.1,vc_responsive

Impress.js – Folienaufbau

In dem vorherigen Artikel habe ich ja bereits den Aufbau der index.html Datei von Impress.js erläutert. Jetzt geht es um den Inhalt des “impress”-DIV Containers der für alle angezeigten “Folien” zuständig ist. Dazu erinnere ich noch einmal kurz an das Ziel dieser Mission

[custom_headline type=”left” level=”h3″ looks_like=”h4″ accent=”true”]Erstes Ziel[/custom_headline]

Das erste Ziel für die Anpassung ist, die index.html Datei so aufzusplitten, dass die Optionen, vom Steuerungsbreich der “Folien” und vom Inhalt getrennt werden. Im Vorfeld noch manuell, später soll dann Impress.js automatisch erkennen, wie viele Folien es so gibt und diese automatisch anordnen und ausgeben.

[custom_headline type=”left” level=”h3″ looks_like=”h4″ accent=”true”]Die Folien im Detail[/custom_headline]

[accordion id=”my-accordion”] [accordion_item title=”bored (X und Y)” parent_id=”my-accordion” open=”true”]

Hier fängt nun der interessante Teil an.

Jeder Schritt innerhalb der Präsentation muss ein eigenes Element innerhalb des “impress”-DIV Containers sein. Die Art der Wiedergabe, also die Positionierung, Rotation oder Skalierung wird mittels impress.js gesteuert.

Die Koordinaten für diese Darstellung wird über Attribute festgelegt.

In dem ersten Beispiel unten wird lediglich eine x und eine y Position angegeben. Diese Werte betragen nun z.B. “data-x=-1000” und data-y=-1500“. Das heisst, dass der Mittelpunkt dieser Folie (ja, der Mittelpunkt) auf der Präsentationsoberfläche (so zusagen auf dem ganzen Tisch) auf den Koordination x = -1000px und y = -1500px abgelegt wird.

Es wird nichts rotiert oder skaliert.
[code] <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>[/code]
[/accordion_item] [accordion_item title=”step-slide (autom. Benennung)” parent_id=”my-accordion” ]

Das “id” Attribut (im vorherigen Beispiel war das id=”bored”) wird für die Ansteuerung bzw. Identifizierung der Folien via Url benötigt. Allerdings ist diese Angabe optional.

In den nächsten beiden Beispielen wurde bewusst darauf verzichtet, somit wird die Url, da es die 2te Folie ist, “step-2” lauten. Im darauf folgenden Beispiel klarerweise “step-3”.

Du kannst auch diesen automatischen Link “step-2″ zur direkten Ansteuerung von Folien verwenden, aber es wird nicht direkt empfohlen, da dies bei grösseren Präsentationen schnell unübersichtlich werden kann.
[code] <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>[/code]
[code] <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>[/code]
[/accordion_item] [accordion_item title=”title (Skalierung)” parent_id=”my-accordion”]

Nun folgt ein Beispiel wo wir uns der Skalierung bedienen.

Dazu verwenden wir wieder ein “data-” Attribut, in diesem Fall lautet es “data-scale=4“, was wiederum bedeutet, dass dieses Element 4x grösser dargestellt wird, als alle anderen.

Für die Präsentation selbst, bzw. den Betrachtungspunkt, heisst das, dass die Folie eigentlich 4x kleiner dargstellt wird, damit sie bildschirmfüllend angezeigt werden kann.
[code] <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>[/code]
[/accordion_item] [accordion_item title=”its (Rotation)” parent_id=”my-accordion”]

Dieses Element bedient sich der Rotation.

Die jeweilige Schreibweise sollte mittlerweile keine Überraschung mehr sein. Wir benutzen das “data-rotate=90” Attribut, um das Element 90 Grad im Uhrzeigersinn rotieren zu lassen.
[code] <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>[/code]
[/accordion_item] [accordion_item title=”big (nochmal Rotation)” parent_id=”my-accordion”]
[code] <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>[/code]
[/accordion_item] [accordion_item title=”tiny (Z-Achse)” parent_id=”my-accordion”]
Und nun wirs richtig spannend. Wir wechseln in die 3. Dimension!

Mit “data-x” und “data-y” können wir auch eine weitere Achse (Z) einbinden, per “data-z”. In dem Beispiel benutzen wir den Wert “data-z=-3000″, was wiederum bedeutet dass das Element weiter weg positioniert wird. Nämlich genau 3000px.
[code] <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>[/code]
[/accordion_item] [accordion_item title=”ing (CSS Animation 1 und Erklärung)” parent_id=”my-accordion”]

Im nächsten Schritt sollte nichts mehr Neues kommen was die “data”-Attribute betrifft. Allerdings werden nun die Elemente in den Folien animiert. Das ist eine sehr einfache CSS-Klasse die den Effekt auslöst, wenn der Zeitpunkt dafür gekommen ist.

Am Anfang der Präsentation werden allen Elementen in den einzelnen Folien die Klasse “future” zugewiesen. Was bedeutet, dass diese noch nicht “anzeigbar” sind und demzufolge auch nicht starten sollen.

Wenn die Präsentation läuft, dann wird die Klasse “future” auf “present” geändert. Das ist der Grund warum die Animation dann startet, wenn du sie sieht. Die “present” Klasse wird zu diesem Zeitpunkt ganz einfach aktiv.

Am Ende, wenn die Folie abgelaufen ist, wird die Klasse “present” entfernt und stattdessen die Klasse “past” zugewiesen.

Zusammenfassend hat also jedes Element in der Präsentation drei verschiedene Klassen: “future” (Zukunft), “present” (Gegenwart) und “past” (Vergangenheit). Es kann dabei nur das aktuelle Objekt die Klasse “present” besitzen.
[code] <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>[/code]
[/accordion_item] [accordion_item title=”imagination (CSS Animation 2)” parent_id=”my-accordion”]
[code] <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>[/code]
[/accordion_item] [accordion_item title=”source (CSS Animation 3) und one-more-thing” parent_id=”my-accordion”]
[code] <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>[/code]
[code] <div id=”one-more-thing” class=”step” data-x=”6000″ data-y=”4000″ data-scale=”2″>
<p>one more thing…</p>
</div>[/code]
[/accordion_item][accordion_item title=”its-in-3d Rotation auf allen Achsen)” parent_id=”my-accordion”]

Und das letzte Beispiel zeigt die ganze Kraft und Flexibilität von Impress.js

Du kannst nicht nur ein Element auf 3 Achsen positionieren, sondern auch um jede Achse rotieren lassen. Dieses Beispiel wird -40 Grad (40 Grad gegen den Uhrzeigersinn) auf der X-Achse und 10 Grad (im Uhrzeigersinn) auf der Y-Achse rotiert.

Du kannst es natürlich auch auf der Z-Achse mit “data-rotate-z” rotieren lassen, was übrigens den selben Effekt hätte.
[code] <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>[/code]
[/accordion_item][accordion_item title=”overview (Übersicht)” parent_id=”my-accordion”]

So… zusammenfassend haben wir nun folgende Eigenschaften zur Präsenationserstellung unter Impress.js beschrieben:

  • “data-x”, “data-y”, “data-z” – sie sind der Koordinationursprung (zentriert) des aktuellen Elements. Der Standardwert ist stets 0 (Null).
  • “data-rotate-x”, “data-rotate-y”, “data-rotate-z” und “data-rotate” – sie definieren die Rotation in Grad. Positive Werte lassen das element im Uhrzeigersinn, negative Werte gegen den Uhrzeigersinn drehen. “”data-rotate” und “data-rotate-z” machen das Gleiche
  • “data-scale” – ist zuständige für die Skalierung, der Standardwert ist 1

Diese Werte/Attribute werden von Impress.js zur Animation und Darstellung genutzt.
[code] <div id=”overview” class=”step” data-x=”3000″ data-y=”1500″ data-scale=”10″>
</div>[/code]
[/accordion_item]

[/accordion]

Nachdem wir das nun alles wissen, können wir anfangen diese index.html Datei aufzusplitten. Wie das geht, zeige ich dir in diesem Artikel: Impress.js – Folientrennung

[content_band class=”center-text” no_margin=”true” inner_container=”true” border=”vertical” bg_color=”#fff”]
[container]
[column type=”1/1″ last=”true” fade=”true” fade_animation=”in”]
[gap size=”1%”]

[icon type=”thumbs-up”] Notiz am Rande: Wenn ein Artikel gefällt, dann empfehle ihn doch bitte weiter. Nichts macht mehr Spaß, wenn man sieht, dass die Arbeit auch durch Liken & Sharen ein wenig Anerkennung findet. Liken & Sharen – eine bessere kostenlose Anerkennung gibt es nicht 😉

[gap size=”1%”]
[share title=”Liken & Sharen” facebook=”true” twitter=”true” google_plus=”true” pinterest=”true” email=”true”]
[/column]
[/container]
[/content_band]

[custom_headline type=”left” level=”h3″ looks_like=”h4″ accent=”true”]Weitere Beiträge[/custom_headline]
[recent_posts count=”4″ category=”impress”]